Ces derniers temps, les progressive web apps ont fait l'objet d'une discussion très enrichissante. Même s'il s'agit encore d'un modèle relativement nouveau, leurs principes peuvent également améliorer les applications développées avec vanilla JS, React, Polymer, Angular ou tout autre framework. Dans ce post, je vais résumer certaines options et applications de référence pour commencer à utiliser votre propre progressive web app dès aujourd'hui.
Qu'est-ce qu'une progressive web app ?
N'oubliez pas que les progressive web apps fonctionnent partout, mais qu'elles sont optimisées dans les navigateurs modernes. L'amélioration progressive est l'épine dorsale 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 chocolat est votre couche de présentation et votre JavaScript est l’enveloppe du bonbon. La couleur de cette couche peut varier, et l'expérience utilisateur peut varier en fonction des capacités du navigateur qui l'utilise.
Considérez la structure "Candy shell" comme l'emplacement où de nombreuses fonctionnalités des progressive web apps peuvent être intégrées. Elles combinent le meilleur du Web et le meilleur des applications. Ils sont utiles pour les utilisateurs dès la première visite dans un onglet de navigateur, sans avoir à les installer.
Au fur et à mesure que l'utilisateur crée une relation avec ces applications par une utilisation répétée, elle rend la coque en forme de bonbon encore plus douce : elle se charge très rapidement avec des connexions réseau lentes (grâce au service worker), l'envoi de notifications push pertinentes et l'affichage d'une icône de premier ordre sur l'écran d'accueil de l'utilisateur qui peut les charger comme des expériences d'application en plein écran. Ils peuvent également tirer parti des bannières intelligentes incitant à installer une application Web.
Les progressive web apps sont
- Progressif : fonctionne pour tous les utilisateurs, quel que soit le navigateur choisi, car ils sont construits avec des améliorations progressives en tant que locataire principal.
- Responsive : s'adapte à tous les facteurs de forme, ordinateurs, mobiles, tablettes ou autres modèles ultérieurs.
- Indépendant de la connectivité : fonctionnalités améliorées avec les service workers pour travailler hors connexion ou sur des réseaux de mauvaise qualité.
- Semblable à une application : utilisez le modèle shell d'application pour fournir des navigations et des interactions de type application.
- Actualisées : toujours à jour grâce au processus de mise à jour du service worker.
- Sûr : diffusé via TLS pour empêcher l'espionnage et garantir que le contenu n'a pas été falsifié.
- Visibilité : sont identifiables en tant qu'"applications" grâce aux fichiers manifestes W3C et au champ d'application d'enregistrement des service workers permettant aux moteurs de recherche de les trouver.
- Réengagement : facilitez le réengagement des utilisateurs grâce à des fonctionnalités telles que les notifications push.
- Installable (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.
- Lien possible : partagez facilement votre contenu via une URL et ne nécessite pas d'installation complexe.
Les progressive web apps ne sont pas non plus propres à Chrome pour Android. La progressive web app Pokedex fonctionne dans Firefox pour Android (bêta). Les premières fonctionnalités "Ajouter à l'écran d'accueil" et "Service worker" de mise en cache fonctionnent parfaitement.
L'un des aspects les plus intéressants de la nature "progressive" de ce modèle est que les fonctionnalités peuvent être déverrouillées progressivement à mesure que les fournisseurs de navigateurs les prennent en charge. Bien entendu, les progressive web apps telles que Pokedex fonctionnent également très bien dans Opera sur Android, avec quelques différences notables en termes d'implémentation:
Pour en savoir plus sur les progressive web apps, consultez l'article de blog original d'Alex Russell. Paul Kinlan a également lancé une balise Stack Overflow très utile pour les progressive web apps, qui mérite d'être consultée.
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. Il permet de lancer l'application en mode plein écran (sans barre d'URL), permet de contrôler l'orientation de l'écran et, dans les versions récentes de Chrome sur Android, prend en charge la définition d'un écran de démarrage et d'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 susmentionnés.
Vous trouverez un exemple de fichier manifeste dans le Web Starter Kit, ainsi que dans les exemples Google Chrome. Bruce Lawson a rédigé un générateur de fichiers manifestes, et Mounir Lamouri a également écrit un programme de validation des fichiers manifestes Web pratique qu'il vaut mieux consulter.
Pour mes projets personnels, j'utilise realfavicongenerator pour générer des icônes de taille correcte pour le fichier manifeste de l'application Web et pour les utiliser sur iOS, les ordinateurs de bureau, etc. Le module de nœud favicons permet également d'obtenir un résultat similaire dans le cadre de votre processus de compilation.
Les navigateurs basés sur Chromium (Chrome, Opera, etc.) prennent en charge les fichiers manifestes d'applications Web aujourd'hui, avec Firefox activement prise en charge et Edge les répertoriant comme en cours de considération. WebKit/Safari n'ont pas encore publié de signaux publics concernant les intentions d'implémentation de la fonctionnalité.
Pour en savoir plus, consultez Applications Web installables avec le fichier manifeste d'application Web dans Chrome pour Android sur le site Web Fundamentals.
Bannière "Ajouter à l'écran d'accueil"
Depuis quelque temps déjà, Chrome sur Android permet d'ajouter votre site à l'écran d'accueil, mais les versions récentes permettent également de suggérer de manière proactive les sites à ajouter à l'aide de bannières natives incitant à installer une application Web.
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)
- Disposer d'un service worker valide
- avoir été visité deux fois, avec au moins cinq minutes entre chaque visite ;
Un certain nombre d'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 associées.
Service worker pour la mise en cache hors connexion
Un service worker est un script qui s'exécute en arrière-plan, indépendamment 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 volontairement courte.
Il s'active lorsqu'il reçoit un événement et ne s'exécute que pendant la durée nécessaire à 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 puissants pour la mise en cache hors connexion, mais ils offrent également des gains de performances significatifs avec un chargement instantané pour les visites répétées sur votre site ou votre application Web. Vous pouvez mettre en cache le shell de votre application pour qu'elle fonctionne hors connexion et insérer son contenu à l'aide de JavaScript.
Un ensemble complet d'exemples de service workers est disponible sur Google Chrome. Le livre de recettes hors connexion de Jake Archibld est un incontournable. Je vous conseille vivement de suivre le tutoriel de Paul Kinlan sur votre première application Web hors connexion si vous débutez avec un service worker.
Notre équipe gère également un certain nombre d'utilitaires d'assistance de service workers et d'outils de conception qui nous permettent de réduire les frais généraux liés à la configuration des service workers. Elles sont répertoriées dans les bibliothèques Service Workers. Voici les deux principaux:
- sw-precache: outil de compilation qui génère un script de service worker permettant de mettre en cache le shell de votre application Web
- sw-toolbox: une bibliothèque fournissant une mise en cache de l'environnement d'exécution pour les ressources rarement utilisées
Jeff Posnick a rédigé une présentation rapide du précache sw, appelée offline-first, fast, with the sw-precache module, ainsi qu'un atelier de programmation sur le même outil qui pourrait vous être utile.
Chrome, Opera et Firefox ont tous mis en place la prise en charge des service workers avec Edge ayant des signaux publics positifs sur l'intérêt pour la fonctionnalité. Safari a brièvement mentionné son intérêt dans le plan sur cinq ans proposé par l'un de ses ingénieurs.
Notifications push pour réengager
En effet, vous pouvez créer des applications Web avec lesquelles les utilisateurs peuvent interagir en dehors d'un onglet. Le navigateur peut être fermé et ils n'ont 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, en s'appuyant 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 à l'étude dans Edge. Safari n'a pas encore communiqué son intention d'implémenter cette fonctionnalité.
L'article Notifications push sur le Web ouvert est une présentation complète de la configuration du mode Push par Matt Gaunt. Un atelier de programmation sur les notifications push est également disponible sur Web Fundamentals.
Michael van Ouwerkerk, de l'équipe Chrome, propose également une présentation en six minutes sur Push, si vous préférez les vidéos.
Superposition de 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 coque en forme de bonbon.
D'autres fonctionnalités à venir 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 les appareils Bluetooth à partir de votre application Web), peuvent également être intégrées à votre progressive web app de cette manière.
La synchronisation unique en arrière-plan a été activée dans Chrome, et Jake Archiballd dispose d'une vidéo de son application Wikipédia hors connexion ainsi que d'un article qui montre comment elle fonctionne. François Beaufort propose également plusieurs exemples Web Bluetooth si vous souhaitez essayer cette API.
Adapté au framework
Rien ne vous empêche d'appliquer les principes ci-dessus à une application ou à un framework existants avec lesquels vous développez des applications. Le modèle de performances RAIL axé sur l'utilisateur et les animations basées sur FLIP constituent quelques autres principes que vous devez garder à l'esprit lorsque vous créez une progressive web app.
J'espère qu'en 2016, nous assisterons de plus en plus à l'intégration naturelle des progressive web apps dans le développement de projets standards et de projets de base. Jusqu'à cette date, l'ajout de ces fonctionnalités à vos propres applications n'est pas très compliqué. Ils en valent donc la peine.
Architecture
Il existe différents niveaux de fonctionnement dans le modèle des progressive web apps, mais une approche courante consiste à les concevoir autour d'un shell d'application. Ce n'est pas une exigence stricte, mais elle présente de nombreux avantages.
L'architecture du shell d'application encourage la mise en cache du shell d'application (interface utilisateur) afin qu'il fonctionne hors connexion et qu'il renseigne son contenu à l'aide de JavaScript. En cas de visites répétées, cela vous permet d'afficher des pixels significatifs à l'écran très rapidement sans le réseau, même si votre contenu provient finalement de ce réseau. Cela s'accompagne d'améliorations considérables des performances.
Jeremy Keith a récemment commenté que, dans ce type de modèle, le rendu côté serveur ne doit peut-être pas être considéré comme une solution de remplacement, mais le rendu côté client doit être considéré comme une amélioration. C'est un commentaire juste.
Dans le modèle Application Shell, 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 "optimisons" 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 rapport sur l'architecture et d'évaluer la meilleure façon d'appliquer des principes similaires à votre propre application et pile.
Éléments standards pour la mise en route
shell d'application
Le dépôt app-shell contient une implémentation quasi complète de l'architecture du shell d'application. Il dispose d'un backend écrit en Express.js et d'un front-end écrit en ES2015.
Étant donné qu'il couvre à la fois les parties côté client et côté serveur du modèle, et qu'il contient beaucoup de choses, il faudra un certain temps pour se familiariser avec le codebase. Il s'agit de notre point de départ le plus complet concernant les progressive web apps. Le prochain objectif de ce projet sera Google Docs.
Kit de démarrage Polymer
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 Chrome pour Android
- Mise en cache hors connexion d'un service worker avec les éléments logiciels Platinum
- Notifications push (configuration manuelle requise) avec les éléments Platinum Push
La version actuelle de la clé pré-partagée n'est pas compatible avec certains des modèles de performances plus avancés (modèle du shell d'application, chargement asynchrone, etc.) que vous trouvez dans certaines applications Web Progressive Polymer.
Notre objectif est d'intégrer ces tendances à la clé pré-partagée en 2016. Toutefois, les premiers tests à ce sujet sont disponibles dans l'application Polymer Zuperkulblog de Rob Dodson et dans l'excellente présentation de Polymer Perf d'Eric Bidelman.
Web Starter Kit
Notre point de départ avisé pour les nouveaux projets "vanilla" inclut les fonctionnalités des progressive web apps suivantes:
- Fichier manifeste de l'application Web
- Écran de démarrage Chrome pour Android
- Mise en cache préalable d'un service worker grâce à sw-precache
Si vous préférez travailler avec la version JS/ES2015 standard et que vous ne pouvez pas utiliser Polymer, le Web Starter Kit peut s'avérer utile comme point de référence, dans lequel vous pouvez 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 des 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 servir de référence. Ce sont aussi de très bonnes applications.
JavaScript vanille
- Les mémos vocaux de Paul Lewis ont été créés à l'aide d'une architecture semblable à celle de
app-shell(rédaction). - Hors connexion Wikipédia de Jake Archibald (vidéo)
- Air Horner de Paul Kinlan
- Guitar Tuner de Paul Lewis (rédaction)
Polymer
- Zuperkulblog par Rob Dodson (présentations)
React
- iFixit de Jeff Posnick : utilise
sw-precachepour la mise en cache du shell d'application (présentation).
DOM virtuel
- Pokedex de Nolan Lawson : excellente progressive web app appliquant une approche "tout faire dans un environnement de travail Web" pour faciliter l'affichage progressif. (résumé)
Angular.js
- Timey.in de Kenneth Auchenberg (également utilisé pour la mise en cache des ressources à l'aide de
sw-precache)
Remarques finales
Comme mentionné précédemment, les progressive web apps en sont encore à leurs balbutiements, mais c'est le moment idéal pour découvrir leurs méthodologies et voir dans quelle mesure elles peuvent s'appliquer à vos propres applications Web.
Paul Kinlan prépare actuellement les conseils "Web Fundamentals" concernant les progressive web apps. Si vous avez des commentaires sur des sujets que vous souhaiteriez voir abordés, n'hésitez pas à les commenter dans le fil de discussion.
Complément d'informations
- Les progressive web apps: échapper aux onglets sans perdre notre âme
- Pourquoi les progressive web apps sont-elles l'avenir du développement Web ?
- Les progressive web apps sont prêtes pour un lancement grand public
- Créer une application progressive avec ServiceWorker
- Les progressive web apps sont l'avenir
- Progressive web app: une nouvelle façon de profiter des mobiles
- Lancement de Pokedex.org, une application Web progressive pour les fans de Pokémon
- Récapitulatif du Sommet des développeurs Chrome: progressive web apps