Introduction
- Retour sur l'histoire de la mobilité.
- L'impact de la mobilité sur le Web.
- Comparatif forces/faiblesses entre applications mobiles natives et Web.
Les composants de base des PWA
- Un proxy dans le navigateur avec les Service Workers.
- La sécurité imposée avec HTTPS.
- Quel support dans les navigateurs ?
- La dimension "Progressive" dans les PWA.
Le Service Worker en détails
- Rappels sur les principes et API de base : ES6, promises, Fetch...
- Cycle de vie d'un Service Worker.
- L'installation : téléchargement, périmètre d'action (scope).
- La mise à jour.
- Le déclenchement, les événements pris en charge.
Travaux pratiques
Création et installation d'un Service Worker.
Outils pour la mise en œuvre
- Bibliothèques, composants et frameworks : Workbox, frameworks intégrant de base les Service Workers.
- Développement et débogage : outils navigateurs, Lighthouse.
Travaux pratiques
Manipulation des outils navigateurs, de Lighthouse.
API Cache : tolérance de défaillance réseau et offline
- Opérations de base sur l'API Cache depuis un Service Worker.
- Quels contenus peuvent être en cache ?
- Gestion du cycle de vie des contenus en cache.
- Autres moyens de stockage : pas de support localStorage, mais IndexedDB.
- Une SPA ultra rapide avec l'architecture Application Shell.
- Accéder au cache depuis une page.
Travaux pratiques
Mise en place du cache sur ressources statiques, sur pages.
Installation de l'application sur l'appareil
- Le Web App Manifest.
- La Web App Install Banner.
- Comportement des différents navigateurs mobiles et desktop.
Travaux pratiques
Mise au point du Manifest.
Les notifications et le push de données
- L'API Notifications.
- Intégration aux notifications natives de l'OS.
- Gestion d'autorisation par l'utilisateur.
- Pousser des données depuis le serveur avec l'API Push.
- Mise à jour en tâche de fond avec l'API Background Sync.
Travaux pratiques
Mettre en place une notification.
Autres capacités nouvelles sur le Web pour aller plus loin
- Paiement simplifié avec l'API Payment Request.
- Lecture de QR code avec les API getUserMedia/Stream et Shape Detection.
- Réalité virtuelle et réalité augmentée.
Travaux pratiques
Lire un QR code.