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.
Les PWA sont des applications web développées à l'aide de technologies spécifiques et de standards leur permettant de tirer parti à la fois des fonctionnalités du web et de celles des applications natives.
Par exemple, les applications web sont plus faciles à trouver — c'est beaucoup plus facile et rapide de consulter un site web que d'installer une application, et ces applications web peuvent être partagées grâce à un lien.
Par ailleurs, les applications natives s'intègrent mieux avec le système d'exploitation et offrent souvent une expérience utilisateur plus fluide. Vous pouvez installer une application native afin qu'elle fonctionne hors-ligne, et les utilisateurs préfèrent ouvrir leur applications favorites via les icônes présentent sur leur écran d'accueil de téléphone, plutôt que d'y accéder via leur navigateur.
Les PWA nous offrent la possibilité de créer des applications web qui bénéficient des mêmes avantages.
Ce n'est pas un tout nouveau concept — par le passé, ce type d'idées ont été revues de nombreuses fois sur le web avec des approches différentes. L'amélioration progressive (progressive enhancement) et le responsive design nous permettent déjà de créer des site web plus accessibles sur téléphone. Travailler hors-ligne et installer des applications était possible au sein de l'environnement Firefox OS il y a quelques années.
Les PWA, cependant, vont encore plus loin, sans pour autant se débarrasser des fonctionnalités qui font la force du web.
Comme suggéré plus haut, les PWA ne sont pas créées à l'aide d'une seule technologie. Elles constituent une nouvelle philosophie pour faire des applications web, impliquant certains motifs spécifiques, des API, et d'autres fonctionnalités. De prime abord, ce n'est pas évident de savoir si une application web est une application web progressive. Une application peut être considérée une application web progressive si elle remplit certains critères, ou implémente un ensemble de fonctionnatilés données: fonctionne hors-ligne, est installable, est facile à synchroniser, peut envoyer des notifications push, etc.
En complément, il existe des outils pour mesurer le pourcentage de conformité d'une application a être une application web progressive (Lighthouse est actuellement le plus populaire). En implémentant une variété de technologies, nous pouvons rendre une application plus progressive, finissant ainsi avec un score Lighthouse plus élevé. Mais ce n'est qu'un indicateur global.
Il y a des principes clés qu'une application web devrait suivre afin d'être identifée comme une PWA. Elle doit être:
Absolument! Avec relativement peu d'effort pour implémenter l'essentiel des fonctionnalités requises par une PWA, les bénéfices sont énormes. Par exemple:
Il y a de nombreuses histoires à succès à propos d'entreprises ayant essayé les PWA, optant pour une expérience web enrichie plutôt qu'une application, et constatant des bénéfices significatifs et mesurables. Le site web PWA Stats partage de nombreux cas d'études qui démontrent ces bénéfices.
L'histoire la plus connue est sans doute celle de Flipkart Lite — le plus large site e-commerce indien redéveloppé en PWA en 2015, ce qui a conduit à 70% d'augmentation en conversions. La PWA AliExpress a aussi constaté de bien meilleurs résultats que le web ou l'application native, avec une augmentation de 104% en terme de taux de conversions pour les nouveaux utilisateurs. Au vu de ces augmentations de profit, et la charge relativement faible de travail requis pour convertir une application en PWA, l'avantage est évident.
Des start-up émergeantes comme couponmoto ont aussi commencé à utiliser des applications web progressives pour améliorer l'engagement des consommateurs, démontrant qu'elles peuvent aider les petites entreprises autant que les grosses à fidéliser les utilisateurs plus efficacement.
Vous pouvez consulter la liste sur pwa.rocks pour plus d'exemples. Une page particulièrement intéressante à mentionner est celle de hnpwa.com — elle liste un exemple d'implémentation du site web Hacker News (au lieu du TodoMVC app classique), dans lequel vous pouvez voir l'utilisation de plusieurs frameworks front-end.
Vous pouvez même générer des PWA en ligne à l'aide du site web PWABuilder.
Pour les informations spécifiques aux service workers et aux notifications push, consultez le Service Worker Cookbook, une collection d'exemples utilisant des service workers.
Ça vaut le coup d'essayer l'approche PWA, afin que vous puissiez constater par vous-même si ça convient à votre application.
Comme expliqué précédemment, les PWA ne reposent pas sur une seule API, mais plutôt sur plusieurs technologies pour atteindre l'objectif de délivrer la meilleure expérience web possible.
L'ingrédient clé requis pour les PWA est le support des service worker. Heureusement les service workers sont désormais supportés sur tous les principaux navigateurs, sur ordinateur et sur téléphone mobile.
D'autres fonctionnalités telles que Web App Manifest, Push, Notifications, et Add to Home Screen bénéficient également d'un large support. Juqu'à présent Safari a limité le support du Web App Manifest et Add to Home Screen, et ne supporte pas les notifications web push. Cependant, les principaux autres navigateurs supportent toutes ces fonctionnalités.
Certaines de ces API sont expérimentales, et accompagnées d'une documenation toujours à l'état de brouillon, mais les histoires à succès comme celles de Flibkart et AliExpress devraient d'ores et déjà suffire à vous convaincre d'essayer et d'implémenter certaines de ces fonctionnalités dans votre application web.
Par dessus tout, vous devriez suivre la régle d'amélioration progressive — utilisez les technologies qui fournissent ces améliorations seulement où elles sont supportées, mais proposez quand même les fonctionnalités basiques de votre application lorsqu'elles ne le sont pas. De cette façon, tout le monde sera en mesure de l'utiliser, mais ceux aqui ont un navigateur récent bénéficieront de toutes les fonctionnalités offertes par les PWA et même plus.
Dans cette série d'articles nous examinerons le code source d'un site web simple qui propose des informations à propos de jeux soumis à A-Frame category lors de la compétition js13kGames 2017. Ne vous souciez pas du contenu réel du site — le plus important est d'apprendre à utiliser les fonctionnalités des PWA dans vos propres projets.
Vous pouvez trouver la version en ligne sur mdn.github.io/pwa-examples/js13kpwa (et le code source), que l'on va expliquer avec attention dans les prochains articles.
Maintenant, allons à la deuxième partie de cette série, dans laquelle on s'intéressera à la structure de notre application démo.
{{NextMenu("Web/Progressive_web_apps/App_structure", "Web/Progressive_web_apps")}}