Applications Web Progressives

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.

Attention : 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

Guides technologiques

Outils