Formation Progressive Web Apps (PWA)

Leçon 1 • Architecture et composants des PWA

Examine les éléments techniques de base : les service workers, les manifestes d'application web et HTTPS. Relie les rôles des composants aux objectifs globaux de fiabilité et d'installabilité des PWA.

Leçon 2 • Configuration de l'environnement de développement

Guide les étudiants dans la configuration des navigateurs, des outils de développement et des serveurs locaux pour le développement de PWA. Assure un environnement de base cohérent avant d'écrire du code.

Leçon 3 • Critères d'audit et listes de contrôle des PWA

Présente la liste de contrôle des PWA de Google et les catégories de notation Lighthouse. Les étudiants apprennent à évaluer des sites existants par rapport aux critères de base et aux critères exemplaires des PWA.

Leçon 1 • Débogage et mise à jour des service workers

Couvre les workflows des outils de développement pour inspecter, mettre à jour et désenregistrer les service workers. Les étudiants acquièrent de l'assurance pour itérer sur le code du service worker pendant le développement.

Leçon 2 • Enregistrement et portée du service worker

Explique comment enregistrer un service worker et définir sa portée au sein d'une origine. Établit la base pour toutes les fonctionnalités ultérieures de mise en cache et de synchronisation en arrière-plan.

Leçon 3 • Événements du cycle de vie du service worker

Explique les événements du cycle de vie install, activate et fetch ainsi que leur ordre d'exécution. Les étudiants apprennent à gérer les mises à jour des workers sans perturber les sessions actives.

Leçon 1 • Stale-While-Revalidate et Cache-Only

Couvre stale-while-revalidate pour équilibrer la fraîcheur et la rapidité, et cache-only pour les ressources totalement hors ligne. Complète la boîte à outils de stratégies standard introduite dans la section précédente.

Leçon 2 • Les fondamentaux de l'API Cache

Présente le stockage en cache, la nomination du cache et les opérations CRUD sur les réponses mises en cache. Fournit la base technique pour toutes les mises en œuvre de stratégies de mise en cache.

Leçon 3 • Gestion du cache et limites de stockage

Aborde les quotas de stockage, les politiques d'éviction et les stratégies pour maintenir les caches légers. Les étudiants apprennent à éviter le gonflement du stockage et à gérer les erreurs de dépassement de quota.

Leçon 4 • Pages de secours hors ligne et expérience utilisateur

Construit une page de secours hors ligne personnalisée et communique l'état de la connectivité aux utilisateurs. Relie le travail de mise en cache technique à une expérience hors ligne soignée et conviviale.

Leçon 1 • Structure du manifeste d'application web

Couvre tous les champs obligatoires et facultatifs du manifeste, y compris le nom, les icônes et l'URL de démarrage. Établit le manifeste comme le fichier de contrôle pour l'apparence et le comportement de l'application installée.

Leçon 2 • Icônes, écrans de démarrage et thèmes

Spécifie les tailles d'icônes, les objectifs et les variantes adaptables pour les icônes adaptatives sur toutes les plateformes. Les étudiants configurent les couleurs du thème et de l'arrière-plan pour une expérience installée personnalisée.

Leçon 3 • Modes d'affichage et orientation

Explique les modes d'affichage standalone, fullscreen, minimal-ui et browser ainsi que leurs effets visuels. Les étudiants sélectionnent le mode approprié pour la navigation et les exigences d'expérience utilisateur de leur application.

Leçon 1 • Distribution de messages push côté serveur

Explique le protocole Web Push, l'authentification VAPID et l'envoi de messages côté serveur. Relie l'abonnement client de la section précédente à un pipeline serveur fonctionnel.

Leçon 2 • API Push et autorisations de notification

Couvre le flux d'abonnement à l'API Push et les bonnes pratiques pour demander l'autorisation de notification. Les étudiants apprennent à programmer les demandes d'autorisation pour maximiser les taux d'acceptation des utilisateurs.

Leçon 3 • Gestion des événements Push dans les service workers

Met en œuvre l'écouteur d'événement push et l'API Notification pour afficher des notifications enrichies. Les étudiants personnalisent les actions, les icônes et les comptes de badges des notifications.

Leçon 1 • App Shell et chargement des ressources critiques

Optimise l'app shell en intégrant le CSS critique et en préchargeant les ressources clés. Relie l'architecture de type shell du chapitre 1 à des gains concrets de performance de chargement.

Leçon 2 • Performance d'exécution et animations fluides

Diagnostique les saccades à l'aide du panneau Performance et applique les bonnes pratiques d'animation en CSS et JS. Les étudiants obtiennent des interactions à 60 ips dans l'interface utilisateur de leur PWA.

Leçon 3 • Core Web Vitals et métriques des PWA

Présente LCP, FID/INP et CLS comme les principaux objectifs de performance pour les PWA. Les étudiants associent chaque métrique aux résultats de l'expérience utilisateur et fixent des objectifs d'amélioration mesurables.

Leçon 4 • Performance JavaScript et taille du bundle

Applique l'élimination du code mort, la division du code et le chargement différé pour réduire la surcharge JavaScript. Les étudiants utilisent des outils d'analyse de bundle pour identifier et éliminer le code inutilisé.

Leçon 1 • Caméra, microphone et capture multimédia

Utilise l'API MediaDevices pour capturer des photos, des vidéos et de l'audio dans une PWA. Les étudiants construisent une fonctionnalité de capture multimédia avec aperçu et téléchargement.

Leçon 2 • API d'accès au système de fichiers et API Presse-papiers

Permet la lecture et l'écriture de fichiers locaux à l'aide de l'API File System Access et de l'intégration du presse-papiers. Les étudiants construisent des fonctionnalités d'édition de documents qui semblent natives sur le bureau.

Leçon 3 • Web Share, Raccourcis et Badging

Intègre l'API Web Share, les raccourcis d'application et l'API Badging pour l'engagement au niveau du système d'exploitation. Les étudiants ajoutent des cibles de partage, des raccourcis d'action rapide et des badges de compteur de messages non lus à leur PWA.

Leçon 1 • Construction de la version de production et pipeline de déploiement

Configure les outils de construction pour générer des fichiers de service worker et de manifeste optimisés pour la production. Les étudiants automatisent le déploiement vers un hébergeur statique avec HTTPS.

Leçon 2 • Surveillance, analytics et suivi des erreurs

Instrumente une PWA avec une surveillance utilisateur réelle, un suivi des événements hors ligne et un rapport d'erreurs. Les étudiants obtiennent une visibilité sur les performances de production et les schémas de défaillance.

Leçon 3 • Audit automatisé des PWA dans le CI/CD

Intègre Lighthouse CI dans un pipeline d'intégration continue pour appliquer les contrôles de qualité des PWA. Les étudiants configurent des seuils de score qui bloquent les déploiements en cas de régression.

Leçon 4 • Tests multi-navigateurs et multiplateformes

Teste les fonctionnalités PWA sur Chrome, Firefox, Safari et Edge sur ordinateur et mobile. Les étudiants identifient et résolvent les lacunes spécifiques à la plateforme dans la prise en charge du service worker et du manifeste.