Progressive Web Applicatons (PWA)

Contenu

Les PWA exploitent plusieurs technologies clés et reposent essentiellement sur une combinaison de l’architecture « application shell » et des «service workers».
L’architecture de l’application shell tire parti d’un service worker pour mettre en cache la «coque» de votre application hors ligne et remplir son contenu en utilisant JS, quand la coque (shell) est chargée. La coque d’une application fait allusion au code HTML, CSS et JavaScript minimal qui alimente l’interface utilisateur.
Les progressive web applications sont :
- progressives : elles sont construites avec l’amélioration progressive comme un principe de base et fonctionnent pour chaque utilisateur, quel que soit le choix du navigateur;
- responsives : s’adaptent à tout facteur de forme à savoir bureau, mobile, tablette, etc.
- indépendantes de la connectivité : capables de fonctionner hors ligne ou sur les réseaux de faible qualité grâce aux service workers;
- toujours à jour grâce aux service workers;
- sûres : servies via HTTPS pour prévenir l’espionnage et assurer que le contenu n’a pas été altéré;
- elles offrent une expérience utilisateur avec les interactions de style et de navigation d’une application native.

Public

- Développeurs Web maîtrisant le JavaScript
- Développeurs Java EE, C++
- Administrateurs serveurs et SGBD

Programme

  • Web Components
  • Introduction aux WebComponents
    - Qu’est-ce un WebComponent et à quoi il sert?
    - Caractéristiques des WebComponents
    - Comment trouver des WebComponents?
  • Utiliser les WebComponents
    - Installer et utiliser un WebComponent dans un environnement Angular
    - Importer les WebComponents dans un module Angular
    -  Importer le Polyfill du WebComponent
    - Configurer le fichier tsconfig.json pour activer la reconnaissance des fichiers JS
    - Activer la reconnaissance des WebComponent avec CUSTOM_ELEMENTS_SCHEMA
    - Utiliser le WebComponent dans un template Angular
  • Comment créer ses propres WebComponents
  • Présentation de Stencil
    - Stencil, le compilateur de WebComponents
    - Utiliser des WebComponents de Stencil
    - Importer le Polyfill du WebComponent    
    - Utiliser le WebComponent dans un template Angular
    - Créer des PWA avec Stencil
  • Progressives web Applications
  • La méthode de développement propre aux PWA
    - Caractéristiques des PWA
    - Framework pour développer des PWA (Stencil)
  • Angular et les PWA
    - Créer et configurer une PWA avec Angular CLI
    - Configuration du BrowserModule
    - Architecture d’une PWA Angular
    - Rendre Linkable une application Angular
  • Service Worker
    - Enregistrer un Service Worker
    - Mécanisme de cache / Cycle de vie d’un Service Worker
    - Debuger les Service Worker dans la console Google Chrome
    - Compatibilité des Navigateurs
  • NGSW / ngsw-masnifest.json
    - Ajout de la balise link dans le fichier index.html
    - Mettre en cache du contenu « Static »
  • Outils de test pour les PWA
    - Google Lighthouse
  • Rendre une application installable sur un téléphone portable
    -  Server HTTPS
    - Icon (logo de l’application)
    - manifest.json

Prochaines dates

du 12.08.19 au 16.08.19

Écolage

CHF 1200.-