Applications Web Progressives

Brouillon

Cette page n'est pas terminée.

PWA community logo Les applications Web progressives utilisent des API Web modernes ainsi qu'une stratégie d'amélioration progressive traditionnelle pour créer des applications Web multiplateformes. Ces applications fonctionnent partout et fournissent quelques fonctionnalités qui donnent à l'expérience utilisateur les mêmes avantages que les applications natives. Cet ensemble de documents explique tout ce qu'il faut savoir sur ces applications.

Pour qu'une application Web soit considérée comme un PWA, techniquement parlant, il devrait présenter les caractéristiques suivantes : Secure contexts (HTTPS), un ou plusieurs Service Workers et un fichier manifest.

Secure contexts (HTTPS): L'application web doit être servie sur un réseau sécurisé. Être un site sécurisé est non seulement une bonne pratique, mais cela fait également de votre application web un site de confiance, surtout si les utilisateurs ont besoin d'effectuer des transactions sécurisées. La plupart des fonctionnalités liées à un PWA telles que la géolocalisation et même les Service Workers ne sont disponibles qu'une fois l'application chargée à l'aide de HTTPS.
Service workers: Un Service Worker est un script qui permet d'intercepter et de contrôler la façon dont un navigateur web traite ses requêtes réseau et la mise en cache des ressources. Avec les Service Workers, les développeurs web peuvent créer des pages web rapides et fiables et des expériences hors ligne.
Manifest file: Un fichier JSON qui contrôle la façon dont votre application apparaît à l'utilisateur et garantit que les applications web progressives sont découvrables. Il décrit le nom de l'application, l'URL de démarrage, les icônes et tous les autres détails nécessaires pour transformer le site web en un format similaire à celui d'une application.

Avantages PWA

Les PWA doivent pouvoir être découvertes, installées, reliées, indépendantes du réseau, progressives, réengageables, réactives et sûres. Pour en savoir plus sur la signification de ces éléments, lisez Avantages des applications web progressives.

Pour savoir comment mettre en œuvre les PWA, lisez notre guide du développeur de PWA.

Documentation

<-- La liste automatique temporaire ci-dessous sera bientôt remplacée -->

Ajouter à l'écran d'accueil: Ajouter à l’écran d’accueil (A2HS en abrégé) est une fonctionnalité disponible dans les navigateurs pour smartphones modernes qui permet aux développeurs d’ajouter facilement et rapidement un raccourci à leur écran d’accueil, représentant leur application Web. Ce guide explique comment utiliser A2HS et ce que vous devez faire en tant que développeur pour permettre à vos utilisateurs d’en tirer parti.
Chargement progressif: Dans les articles précédents, nous avons abordé les APIs qui nous aident à faire de notre exemple js13kPWA une Progressive Web App: Service Workers, Manifestes Web, Notifications et Push. Dans cet article, nous irons encore plus loin et améliorerons la performance de l'application en téléchargeant progessivement ses ressources.
Comment faire pour que les PWAs relancent les utilisateurs en utilisant des notifications et des messages poussés: Avoir la possibilité de mettre en cache le contenu d'une application pour travailler en mode déconnecté est une formidable fonctionnalité. Donner la possibilité à l'utilisateur d'installer l'application web sur son écran d'accueil est encore mieux. Mais plutôt que de s'en remettre seulement aux actions de l'utilisateur, nous pouvons faire plus, en utilisant des messages poussés et des notifications pour le relancer automatiquement et fournir des nouveaux contenus à chaque fois qu'ils sont disponibles.
Comment rendre les PWAs installables: Dans l'article précédent, nous avons vu comment js13kPWA fonctionne en mode déconnecté grâce à son service worker, mais nous pouvons aller encore plus loin et permettre aux utilisateurs d'installer l'application web sur les navigateurs mobiles pris en charge, comme s'il s'agissait d'une application native. Cet article explique comment réaliser ceci en utilisant un manifeste web et une fonctionnalité appelée "ajouter à l'écran d'accueil".

Faire fonctionner les PWAs en mode déconnecté grâce aux Service workers: Maintenant que nous avons vu à quoi ressemble l'architecture de js13kPWA et que nous avons configuré et exécuté la structure de base, voyons comment sont implémentées les fonctionnalités en mode déconnecté mettant en oeuvre Service Worker. Dans cet article, nous examinerons comment cela est utilisé dans notre exemple js13kPWA (voir également le code source). Nous examinerons comment ajouter la fonctionnalité mode déconnecté.
Introduction aux progressive web apps: Cet article fournit une introduction aux Progressive Web Apps (PWA), présentant ce qui les caractérise, et les avantages qu'elles apportent par rapport à de simples applications web.
Structure d'une Progressive web app: Maintenant que nous avons pris connaissances des principes théoriques sur lesquelles sont bâties les PWAs, penchons nous sur la structure recommandée d'une vraie application. Nous commencerons par analyser l'application js13kPWA et par examiner pourquoi elle est construite de cette façon et quels bénéfices elle en retire.

Tout ce qui se trouve en dessous de ce point est un reste de l'ancienne version de cette page et sera remanié au fur et à mesure de la révision des autres contenus.

Guides de base des PWA

Les guides suivants vous montrent ce qu'il faut faire pour mettre en œuvre une PWA, en examinant un exemple simple et en vous montrant comment tous les éléments fonctionnent.

Guides technologiques

Stockage côté client – un long guide montrant comment et quand utiliser le stockage web, IndexedDB et les Service Workers.
Using service workers – un guide plus approfondi couvrant l'API Service Worker.
Utilisation d'IndexedDB – les principes fondamentaux d'IndexedDB, expliqués en détail.
Utilisation de l'API de stockage Web – l'API de stockage Web simplifiée.
Instant Loading Web Apps with An Application Shell Architecture – un guide sur l'utilisation du modèle de codage App Shell pour créer des applications qui se chargent rapidement.
Utilisation de l'API Push – apprenez l'essentiel sur l'API Web Push.
Utilisation des notifications API – les notifications Web en bref.
Les éléments de base du design réactif – apprenez les bases du design réactif, un sujet essentiel pour la mise en page d'une application moderne.
Mobile first – souvent, lors de la création de mises en page d'applications réactives, il est judicieux de créer la mise en page mobile par défaut, et de construire des mises en page plus larges par-dessus.
Guide de l'ajout à l'écran d'accueil – découvrez comment vos applications peuvent tirer profit de l'ajout à l'écran d'accueil (A2HS).

Outils

localForage – une belle et simple bibliothèque JavaScript pour rendre le stockage de données côté client vraiment simple ; elle utilise IndexedDB par défaut et revient à Web SQL/Web Storage si nécessaire.
ServiceWorkerWare – un Express-like microframe pour faciliter le développement du Service Worker.
oghliner – il s'agit non seulement d'un modèle, mais aussi d'un outil permettant de déployer des applications Web hors ligne sur des pages GitHub.
sw-precache – un module de nœud pour générer un code de travailleur de service qui précache des ressources spécifiques.
workbox – successeur spirituel du sw-precache avec des stratégies de mise en cache plus avancées et un précaching facile.
upup – un petit script qui assure que votre site est toujours là pour vos utilisateurs.
The service worker cookbook – une série d'excellentes recettes de service worker/push, montrant comment mettre en œuvre une application hors ligne, mais aussi bien plus.
WA VS Code extension – une collection de tous les extraits de code essentiels dont vous avez besoin pour créer des applications Web progressives dans votre environnement VS Code.