Formation PWA : développer des Progressive Web Apps

1/ Présentation PWA

• Vue d'ensemble des Progressive Web Apps

• Historique et positionnement

• La dimension « progressive » des PWAs

• PWA vs. applications mobiles natives et Single Page Applications

• Avantages et limitations

2/ Architecture et composants 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

3/ Installation de l'application sur l'appareil

• Créer un fichier manifest.json

• Composants (background_color, description, dir, etc)

• Configurer les propriétés du Web App Manifest

• Web App Install Banner

• Comportement des différents navigateurs mobiles et desktop

4/ Service Worker

• Les APIs Cache et Fetch

• Rappels sur les promises, ES2015, 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

5/ API Cache

• Opérations de base sur l'API Cache depuis un Service Worker

• Identifier les objets à mettre en cache

• Cache statique et cache dynamique

• Mettre des fichiers en cache avec un service worker

• Stratégies de cache et gestion du cache avancée

• Implémenter la solution IndexedDB

• Travailler avec IndexedDB et les promises

• Une SPA ultra rapide avec l'architecture Application Shell

• Accéder au cache depuis une page

6/ Responsive Design

• Considérations pour créer des pages web responsives

• Les Media Queries, nouveautés de CSS3

• Utiliser les images de manière responsive

• Ajouter des animations

7/ 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

8/ Outils pour la mise en œuvre

• Bibliothèques et frameworks

• Outils de développement des navigateurs

• Workbox pour la gestion des service workers

• Lighthouse, en tant qu’extension et depuis la ligne de commande

• Débogage

9/ 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