Premiers pas avec les progressive web apps

Addy Osmani
Addy Osmani

Les progressive web apps ont récemment fait l'objet de nombreuses discussions très bienvenues. Le modèle est encore relativement nouveau, mais ses principes peuvent tout aussi améliorer les applications créées avec JavaScript vanilla, React, Polymer, Angular ou tout autre framework. Dans cet article, je vais résumer certaines options et applications de référence pour commencer aujourd'hui avec votre propre progressive web app.

Qu'est-ce qu'une progressive web app ?

Il est important de garder à l'esprit que les progressive web apps fonctionnent partout, mais sont boostées dans les navigateurs modernes. L'amélioration progressive est la colonne vertébrale du modèle.

Aaron Gustafson a comparé l'amélioration progressive à un M&M aux cacahuètes. La cacahuète est votre contenu, le revêtement en chocolat est votre couche de présentation et votre JavaScript est la coquille de bonbons durs. La couleur de cette couche peut varier et l'expérience utilisateur peut varier en fonction des fonctionnalités du navigateur.

Considérez la coquille comme l'endroit où se trouvent de nombreuses fonctionnalités des progressive web apps. Ce sont des expériences qui combinent le meilleur du Web et le meilleur des applications. Ils sont utiles aux utilisateurs dès leur première visite dans un onglet de navigateur, et aucune installation n'est requise.

Au fur et à mesure que l'utilisateur crée une relation avec ces applications grâce à une utilisation répétée, il rend la coquille encore plus sucrée : il se charge très rapidement lorsque les connexions réseau sont lentes (grâce au service worker), envoie des notifications push pertinentes et affiche une icône de première classe sur l'écran d'accueil qui permet de les charger en tant qu'applications en plein écran. Ils peuvent également profiter des bannières intelligentes incitant à installer une application Web.

Bannières d'installation d'applications Web axées sur l'engagement, lancement depuis l'écran d'accueil de l'utilisateur, écran de démarrage dans Chrome pour Android, fonctionnement hors connexion avec le service worker

Les progressive web apps sont

  • Progressif : ils fonctionnent pour tous les utilisateurs, quel que soit le choix de leur navigateur, car ils sont conçus avec des améliorations progressives en tant que locataires principaux.
  • Responsive : Adapté à tout facteur de forme, ordinateur, mobile, tablette ou autre.
  • Indépendante de la connectivité : améliorée grâce aux service workers qui permettent de travailler hors connexion ou sur des réseaux de basse qualité.
  • Semblable à une application : utilisez le modèle de shell d'application pour fournir des navigations et des interactions semblables à celles d'une application.
  • Fresh : Toujours à jour grâce au processus de mise à jour du service worker.
  • Sûr : diffusé via TLS pour éviter l'espionnage et garantir que le contenu n'a pas été falsifié.
  • Visible : ces éléments sont identifiables en tant qu'"applications" grâce aux fichiers manifestes W3C et au champ d'application d'enregistrement du service worker permettant aux moteurs de recherche de les trouver.
  • Réengagement : facilitez le réengagement grâce à des fonctionnalités telles que les notifications push.
  • Installable : permet aux utilisateurs de conserver les applications qu'ils trouvent les plus utiles sur leur écran d'accueil sans avoir à passer par une plate-forme de téléchargement d'applications.
  • Accessible via un lien : le partage s'effectue facilement via une URL et ne nécessite pas d'installation complexe.

De plus, les progressive web apps ne sont pas propres à Chrome pour Android. La progressive web app Pokedex fonctionne dans Firefox pour Android (bêta) avec l'option d'ajout à l'écran d'accueil et les fonctionnalités de mise en cache du service worker.

Progressive web apps fonctionnant dans Firefox pour Android

L'un des aspects positifs de la nature "progressive" de ce modèle est que les fonctionnalités peuvent être débloquées progressivement à mesure que les fournisseurs de navigateurs proposent une meilleure prise en charge. Les progressive web apps, telles que Pokedex, fonctionnent également très bien dans Opera sur Android, à quelques différences importantes au niveau de l'implémentation:

Progressive web apps fonctionnant dans Opera pour Android

Pour en savoir plus sur les progressive web apps, lisez l'article de blog original d'Alex Russell, qui les présente. Paul Kinlan a également lancé un tag Stack Overflow très utile pour les progressive web apps.

Principes

Fichier manifeste d'application Web

Le fichier manifeste permet à votre application Web d'avoir une présence plus native sur l'écran d'accueil de l'utilisateur. Elle permet de lancer l'application en mode plein écran (sans barre d'URL) et de contrôler l'orientation de l'écran. Dans les versions récentes de Chrome sur Android, il est possible de définir un écran de démarrage et une couleur de thème pour la barre d'adresse. Il permet également de définir un ensemble d'icônes par taille et densité utilisées pour l'écran de démarrage et l'icône de l'écran d'accueil mentionnés ci-dessus.

Ajoutez du contenu à l'écran d'accueil, lancez-le depuis l'écran d'accueil et profitez d'expériences en plein écran semblables à celles d'une application.

Vous trouverez un exemple de fichier manifeste dans le Web Starter Kit (Kit de démarrage Web) et les exemples Google Chrome. Bruce Lamouri a écrit un Manifest Generator, et Mounir Lamouri a également écrit un programme de validation Web Manifest pratique, qui mérite d'être consulté.

Dans mes projets personnels, je m'appuie sur realfavicongenerator pour générer les icônes de bonne taille pour le fichier manifeste de l'application Web et pour les utiliser sur iOS, sur ordinateur, etc. Le module de nœud favicons peut également obtenir un résultat similaire dans le cadre de votre processus de compilation.

Les navigateurs basés sur Chromium (Chrome, Opera, etc.) sont actuellement compatibles avec les fichiers manifestes d'applications Web, Firefox pour la mise au point et la prise en charge par Edge, qui sont à l'étude. WebKit/Safari n'a pas encore publié de signaux publics concernant leurs intentions d'implémenter la fonctionnalité.

Pour en savoir plus, consultez Applications Web installables avec le fichier manifeste d'application Web dans Chrome pour Android dans les principes de base du Web.

Bannière "Ajouter à l'écran d'accueil"

Chrome sur Android est compatible avec l'ajout de votre site à l'écran d'accueil depuis un certain temps déjà, mais les versions récentes permettent également de suggérer de façon proactive l'ajout de sites à l'aide de bannières natives incitant à installer une application Web.

Application de démonstration des mémos vocaux affichant une invite de bannière d'installation d'application Web dans Chrome pour Android

Pour que les invites d'installation s'affichent, votre application doit:

  • Disposer d'un fichier manifeste d'application Web valide
  • Servir via HTTPS (voir letsencrypt pour obtenir un certificat sans frais)
  • Enregistrer un service worker valide
  • être visité deux fois (au moins cinq minutes entre deux visites) ;

Plusieurs exemples de bannières incitant à installer une application sont disponibles, allant des bannières de base à des cas d'utilisation plus complexes tels que l'affichage d'applications connexes.

Service Worker pour la mise en cache hors connexion

Un service worker est un script qui s'exécute en arrière-plan, séparément de votre page Web. Il répond aux événements, y compris aux requêtes réseau effectuées à partir des pages qu'il diffuse. La durée de vie d'un service worker est intentionnellement courte.

Elle s'active lorsqu'elle reçoit un événement et s'exécute uniquement pendant la durée nécessaire de son traitement. Service worker vous permet d'utiliser l'API Cache pour mettre en cache des ressources et d'offrir aux utilisateurs une expérience hors connexion.

Les service workers sont très performants pour la mise en cache hors connexion, mais ils offrent également des gains de performances significatifs sous la forme d'un chargement instantané pour les visites répétées sur votre site ou dans votre application Web. Vous pouvez mettre en cache le shell de votre application pour qu'il fonctionne hors connexion et qu'il insère son contenu à l'aide de JavaScript.

Mise en cache du shell de l'application par un service worker, ce qui lui permet de se charger sans le réseau

Un ensemble complet d'exemples de service worker est disponible sur les exemples Google Chrome. Le livre de recettes hors connexion de Jake Archibald est un incontournable. Je vous recommande vivement de suivre le tutoriel de votre première application Web hors connexion de Paul Kinlan si vous débutez avec un service worker.

Notre équipe gère également un certain nombre d'utilitaires de service worker et crée des outils qui nous aident à réduire les frais généraux liés à la configuration des service workers. Elles sont listées dans les bibliothèques de service workers. Les deux principaux sont les suivants:

  • sw-precache: outil de compilation qui génère un script de service worker utile pour effectuer une mise en cache préalable de l'interface système de votre application Web.
  • sw-toolbox: bibliothèque fournissant la mise en cache de l'environnement d'exécution pour les ressources rarement utilisées

Jeff Posnick a écrit une présentation rapide de sw-precache intitulée Hors connexion, rapide, avec le module sw-precache et un atelier de programmation sur le même outil qui pourrait vous être utile.

Chrome, Opera et Firefox ont tous mis en œuvre la compatibilité avec les service worker avec Edge ayant des signaux publics positifs concernant l'intérêt pour la fonctionnalité. Safari a brièvement mentionné l'intérêt pour ce projet dans le plan sur cinq ans proposé par un ingénieur.

Notifications push pour le réengagement

En effet, vous pouvez créer des applications Web avec lesquelles les utilisateurs peuvent interagir en dehors d'un onglet. Vous pouvez fermer le navigateur, et l'utilisateur n'a même pas besoin d'utiliser activement votre application Web pour interagir avec votre expérience. Cette fonctionnalité nécessite à la fois un service worker et un fichier manifeste d'application Web, basé sur certaines des fonctionnalités résumées précédemment.

L'API Push est implémentée dans Chrome, en cours de développement dans Firefox et en cours de réflexion dans Edge. Pour l'instant, aucun signal public de la part de Safari n'indique son intention d'implémenter cette fonctionnalité.

Matt Gaunt a lancé les notifications push sur le Web ouvert, une introduction complète à la configuration push. Un atelier de programmation sur les notifications push est également disponible sur le Web Fundamentals.

Notification push Web sur le site mobile de Facebook

Michael van Ouwerkerk, de l'équipe Chrome, propose également une introduction de six minutes sur Push si vous préférez les vidéos.

Superposer des fonctionnalités avancées

N'oubliez pas que l'expérience utilisateur peut varier selon le navigateur utilisé pour afficher votre application Web. Vous avez le contrôle de la coquille.

Des fonctionnalités supplémentaires prochainement disponibles sur la plate-forme Web, telles que la synchronisation en arrière-plan (pour la synchronisation des données avec un serveur même lorsque votre application Web est fermée) et le Bluetooth Web (pour communiquer avec des appareils Bluetooth depuis votre application Web), peuvent également être superposées de cette manière à votre progressive web app.

La synchronisation en arrière-plan unique a été activée dans Chrome, et Jake Archibold propose une vidéo de son application Wikipédia hors connexion et un article illustrant son fonctionnement. François Beaufort propose également un certain nombre d'exemples Web Bluetooth si vous souhaitez essayer cette API.

Compatible avec le framework

Rien ne vous empêche vraiment d'appliquer les principes ci-dessus à une application ou à un framework existants que vous développez. Lors de la création de votre progressive web app, gardez à l'esprit les autres principes : le modèle de performances RAIL centré sur l'utilisateur et les animations FLIP.

J'espère qu'au cours de l'année 2016, un nombre croissant de modèles standards et de projets de base seront naturellement compatibles avec les progressive web apps, une fonctionnalité essentielle. En attendant, ajouter ces fonctionnalités à vos propres applications n'est pas très compliqué et cela en vaut la peine.

Architecture

Il existe différents niveaux de modèle "tout-en-un" dans le modèle de progressive web app, mais une approche courante consiste à les concevoir autour d'un shell d'application. Il ne s'agit pas d'une exigence stricte, mais elle présente plusieurs avantages.

L'architecture du shell d'application encourage la mise en cache de votre shell d'application (interface utilisateur) afin qu'il fonctionne hors connexion et qu'il insère son contenu à l'aide de JavaScript. Lors des visites répétées, cela vous permet d'afficher très rapidement des pixels pertinents à l'écran, sans connexion au réseau, même si votre contenu provient finalement de là. Cela permet d'améliorer considérablement les performances.

shell de l'application visualisée comme décomposant l'UI de votre application, comme le panneau et la zone de contenu principal

Jeremy Keith a récemment commenté que, dans ce type de modèle, le rendu côté serveur ne devrait peut-être pas être considéré comme une solution de remplacement, mais plutôt comme une amélioration. C'est un commentaire juste.

Dans le modèle de shell d'application, le rendu côté serveur doit être utilisé autant que possible, et le rendu progressif côté client doit être utilisé comme une amélioration, de la même manière que nous "améliorons" l'expérience lorsque le service worker est pris en charge. Il existe de nombreuses façons d'y parvenir.

Je vous recommande de lire notre article sur l'architecture et d'évaluer comment des principes similaires pourraient être appliqués au mieux à votre propre application et pile.

Informations standards pour la mise en route

Shell de l'application

Afficher sur GitHub

Le dépôt app-shell contient une implémentation presque terminée de l'architecture Application Shell. Elle dispose d'un backend écrit dans Express.js et d'un frontal écrit dans ES2015.

Étant donné qu'il couvre à la fois les parties côté client et côté serveur du modèle, et qu'il y a beaucoup d'éléments à gérer, il vous faudra un certain temps pour vous familiariser avec le codebase. Il s'agit par ailleurs de notre point de départ le plus complet pour les progressive web apps. Nous allons nous concentrer ensuite sur Docs dans ce projet.

Kit de démarrage Polymer

Afficher sur GitHub

Le point de départ officiel des applications Web Polymer est compatible avec les fonctionnalités suivantes des progressive web apps:

  • Fichier manifeste de l'application Web
  • Écran de démarrage de Chrome pour Android
  • Mise en cache hors connexion de Service Worker avec les éléments Platinum SW
  • Notifications push (configuration manuelle requise) avec les éléments Platinum Push
Kit de démarrage Polymer affichant les fonctionnalités intégrées des progressive web apps

La version actuelle de la clé pré-partagée n'est pas compatible avec certains schémas de performances plus avancés (comme le modèle de shell d'application ou le chargement asynchrone) que vous trouvez dans certaines applications Web Progressive Polymer.

Nous envisageons d'intégrer ces modèles à la PSK en 2016, mais les premières expériences en la matière sont disponibles dans l'application Polymer Zuperkulblog de Rob Dodson et dans l'excellente présentation de Polymer Perf Patterns d'Eric Bidelman.

Web Starter Kit

Afficher sur GitHub

Notre point de départ pour nos nouveaux projets standards comprend les fonctionnalités suivantes pour les progressive web apps:

  • Fichier manifeste de l'application Web
  • Écran de démarrage de Chrome pour Android
  • Pré-mise en cache d'un service-workers grâce à sw-precache

Si vous préférez travailler avec la version vanilla JS/ES2015 et que vous ne pouvez pas utiliser Polymer, le kit Web Starter peut vous servir de point de référence pour réutiliser ou voler des extraits de code.

Progressive web apps avec et sans frameworks

Un certain nombre de progressive web apps Open Source ont déjà été créées par les membres de la communauté, avec et sans bibliothèques et frameworks JS. Si vous cherchez l'inspiration, les dépôts ci-dessous peuvent vous être utiles. Ce sont aussi vraiment de mauvaises applications.

Progressive web apps implémentés à l'aide de React, Polymer, Virtual DOM et AngularJS

JavaScript vanille

Polymer

Réagir

  • iFixit, par Jeff Posnick, utilise sw-precache pour la mise en cache du shell de l'application (diapositives)

DOM virtuel

  • Pokedex de Nolan Lawson : excellente progressive web app qui applique une approche de type "tout faire dans un worker Web" pour faciliter l'affichage progressif. (résumé)

Angular.js

  • Timey.in de Kenneth Auchenberg, utilise également sw-precache pour la mise en cache des ressources.

Remarques de fin

Comme nous l'avons déjà mentionné, les progressive web apps n'en sont qu'à leurs débuts, mais l'heure est venue de tester les méthodologies qui les sous-tendent et de voir comment elles peuvent s'appliquer à vos propres applications Web.

Paul Kinlan prépare actuellement les conseils sur les principes du Web Fundamentals concernant les progressive web apps. Si vous avez des suggestions sur des sujets qui vous intéressent, n'hésitez pas à nous faire part de vos commentaires dans le fil de discussion.

Complément d'informations