Ce cours décrit tous les aspects du développement de progressive web apps modernes.
Ce cours aborde les principes de base du développement de progressive web apps sous la forme d'éléments faciles à comprendre. Dans les modules suivants, vous découvrirez ce qu'est une progressive web app, comment en créer une ou mettre à niveau votre contenu Web existant, et comment ajouter tous les éléments nécessaires à une application hors connexion installable. Utilisez le volet de menu pour parcourir les modules. (Le menu se trouve à gauche sur l'ordinateur de bureau ou derrière le menu hamburger sur mobile.)
Vous allez découvrir les principes de base des PWA, tels que le fichier manifeste d'application Web, les service workers, la conception d'applications en tête et l'utilisation d'autres outils pour tester et déboguer votre PWA. Après avoir suivi ces principes de base, vous découvrirez l'intégration à la plate-forme et au système d'exploitation, comment améliorer l'installation et l'utilisation de votre PWA, et comment proposer une expérience hors connexion.
Chaque module comprend des démonstrations interactives et des auto-évaluations vous permettant de tester vos connaissances. Vous pourrez tester les démos sur votre téléphone mobile, votre tablette ou votre ordinateur portable tout en jouant avec du code afin de comprendre les principes de base d'une progressive web app.
Ce cours s'adresse aussi bien aux développeurs Web débutants qu'avancés. Vous pouvez parcourir la série du début à la fin pour mieux comprendre les PWA de haut en bas, ou vous en servir comme référence pour des sujets spécifiques. Si vous débutez dans le développement Web, vous aurez besoin de connaissances de base sur HTML, CSS et JavaScript. Découvrez Learn CSS, ainsi que les cours HTML et JavaScript sur MDN.
Vous y découvrirez:
Premiers pas
Si vous souhaitez créer une progressive web app, vous vous demandez peut-être par où commencer, s'il est possible de convertir un site Web en PWA sans repartir de zéro, ou comment passer d'une application spécifique à une plate-forme à une PWA. Cet article va vous aider à répondre à ces questions.
Les bases
Toutes les progressive web apps sont des sites Web modernes. Il est donc important que votre site Web ait une base solide en matière de responsive design, de mobile et avant tout, de conception intrinsèque et de performances Web.
Conception de l'application
L'une des principales différences entre les progressive web apps et les sites Web et applications Web classiques est la facilité d'installation. Cela crée une expérience autonome plus intégrée à la plate-forme et au système d'exploitation. Cette installation offre davantage de flexibilité et de nouvelles responsabilités, car notre contenu ne sera pas associé à une interface utilisateur de navigateur.
Éléments et données
Une progressive web app est un site Web ; tous ses éléments sont identiques à ceux du Web, mais avec de nouveaux outils pour que ces éléments se chargent rapidement lorsqu'ils sont en ligne et disponibles hors connexion.
Service workers
Les service workers font partie intégrante des PWA. Elles permettent un chargement rapide (quel que soit le réseau), un accès hors connexion, des notifications push et bien d'autres fonctionnalités.
Mise en cache
Vous pouvez utiliser l'API Cache Storage pour télécharger, stocker, supprimer ou mettre à jour des éléments sur l'appareil. Ces éléments peuvent ensuite être diffusés sur l'appareil sans nécessiter de requête réseau.
Actif
L'événement d'extraction du service worker vous permet d'intercepter des requêtes réseau et de fournir une réponse à l'aide de différentes techniques.
Workbox
Workbox est un ensemble de modules qui simplifient les interactions courantes des service workers, telles que le routage et la mise en cache. Chaque module traite d'un aspect spécifique du développement des service workers. L'objectif de Workbox est de simplifier au maximum l'utilisation des service workers, tout en offrant la flexibilité nécessaire pour répondre aux besoins complexes des applications.
Données hors connexion
Pour bénéficier d'une expérience hors connexion fiable, vous devez implémenter la gestion du stockage. Des outils tels que IndexedDB, Cache, Storage Manager, le stockage persistant et l'indexation de contenu peuvent vous aider.
Installation
Les applications installées sont faciles d’accès et peuvent bénéficier de certaines intégrations plus poussées avec l’OS. Découvrez comment rendre votre PWA installable et bénéficier de ces avantages.
Fichier manifeste d'application Web
Le fichier manifeste de l'application Web est un fichier JSON qui définit la manière dont la PWA doit être traitée comme une application installée, y compris son apparence et son comportement de base dans le système d'exploitation.
Invite d'installation
Pour les sites qui répondent aux critères d'installation des PWA, le navigateur déclenche un événement pour inviter l'utilisateur à installer la PWA. La bonne nouvelle, c'est que vous pouvez utiliser cet événement pour personnaliser votre invite et inviter les utilisateurs à installer votre application.
Mettre à jour
Vous devez mettre à jour votre PWA. Ce chapitre présente les outils nécessaires pour modifier différentes parties de votre PWA, des éléments aux métadonnées.
Améliorations
Votre utilisateur s'attend à une bonne expérience. Dans ce chapitre, vous découvrirez comment améliorer votre PWA avec des écrans de démarrage et des raccourcis d'application, et comment fonctionnent les sessions.
Détection
Il est utile d'identifier la manière dont vos utilisateurs interagissent avec votre application pour personnaliser et améliorer l'expérience utilisateur. Par exemple, vous pouvez vérifier si votre application est déjà installée sur l'appareil de l'utilisateur et implémenter des fonctionnalités telles que le transfert de navigation vers l'application autonome à partir du navigateur.
Intégration de l'OS
Votre PWA fonctionne désormais en dehors du navigateur. Ce chapitre explique comment poursuivre l'intégration avec le système d'exploitation une fois que les utilisateurs ont installé votre application.
Gestion des fenêtres
Une PWA en dehors du navigateur gère sa propre fenêtre. Dans ce chapitre, vous découvrirez les API et les fonctionnalités permettant de gérer une fenêtre dans le système d'exploitation.
Fonctionnalités expérimentales
Des fonctionnalités de PWA sont encore en cours de développement, et vous pouvez en faire partie. Dans ce chapitre, vous découvrirez le projet Fugu, comment vous inscrire à une phase d'évaluation et comment utiliser des API expérimentales.
Outils et débogage
Nous passerons en revue les outils à votre disposition pour développer, déboguer et tester vos progressive web apps.
Architecture
Lorsque vous développez une PWA, vous devez prendre certaines décisions. Par exemple, vous devez choisir de créer une application monopage ou multipage, et choisir de l'héberger à la racine de votre domaine ou dans un dossier.
Gestion de la complexité
La simplicité d'une application Web peut s'avérer étonnamment compliquée. Dans ce module, vous allez découvrir comment les API Web fonctionnent avec les threads et comment vous pouvez l'utiliser pour des modèles de PWA courants, tels que la gestion de l'état.
Fonctionnalités
Les PWA ne sont pas seulement liées à l'écran. Ce chapitre présente les fonctionnalités actuelles d'une PWA en termes de matériel, de capteurs et d'utilisation de la plate-forme.
Conclusion
Étapes suivantes et ressources.
Alors, êtes-vous prêt à vous familiariser avec les PWA ?