Introduction

Généralités

Le terme Progressive Web App (PWA) est apparu en 2015 lors de la keynote de la conférence Chrome Dev Summit 2015 organisée par Google (https://www.youtube.com/watch?v=MyQ8mtR9WxI). Durant cette conférence, Alex Russell et Andreas Bovens ont présenté les différents standards derrière ce nouveau terme.

Dans cette période où l’écosystème évolue énormément, avec la recrudescence de nouvelles librairies et de nouveaux frameworks, nous pensons que le terme Progressive Web App ne correspond pas à de nouvelles technologies à appréhender, il s’agit plutôt d’un terme de marketing. D’ailleurs, Apple a décidé de donner d’autres noms à ce type d’applications : HTML5 Apps ou Homescreen Web Apps.

L’expression Progressive Web App permet d’indiquer qu’à présent, nous pouvons créer des applications web sur mobile avec une expérience utilisateur aussi proche que celle des applications natives. Sur mobile uniquement ? En fait, depuis quelques mois, nous pouvons également les utiliser sur nos ordinateurs via des applications natives.

Imaginez un monde dans lequel vous pouvez développer une application et la rendre utilisable sur toutes ces plateformes. Ou encore, à une échelle moins importante, imaginez que vous pouvez utiliser les mêmes technologies pour développer des applications pour l’ensemble des cas d’utilisation. Le rêve, non ?

Ce rêve n’est possible que grâce à la plateforme web basée sur des standards sur lesquels travaille l’ensemble des acteurs du marché (compagnies privées, sociétés développant des navigateurs…) pour définir les meilleurs outils pour les développeurs. Pour rappel, la plateforme se base sur trois langages principaux :

Deux sigles : PRPL et FIRE

Si vous vous intéressez aux Progressive Web Apps depuis quelque temps, vous avez dû voir ces deux sigles dans la littérature associée. PRPL et FIRE constituent un moyen mnémotechnique permettant de se souvenir des caractéristiques d’une Progressive Web App. Certains navigateurs utilisent de plus en plus l’un de ces deux termes plutôt que la dénomination historique de Progressive Web App (qui est trop connotée marketing).

PRPL (Push, Render, Pre-cache, Lazy load) correspond à toutes les bonnes pratiques à mettre en place afin d’optimiser le temps de chargement d’une application. Quand nous parlons de temps de chargement, nous parlons du temps de chargement lors de la toute première visite de l’application ainsi que les fois où l’utilisateur va y revenir.

Nous allons tout d’abord demander au serveur d’initier l’envoi des ressources statiques (fichiers HTML, CSS, JavaScript…) nécessaires pour visualiser la page (et non le navigateur, comme dans la plupart des applications web). Ensuite, nous allons mettre en cache certaines ressources statiques correspondant au layout de l’application, afin de donner l’impression que celle-ci se charge rapidement. Et pour finir, nous allons demander au navigateur d’afficher la page le plus rapidement possible en limitant les ressources statiques à...

Success stories

Depuis plusieurs années, les grands sites d’e-commerce remarquent que le trafic sur Web mobile dépasse celui sur ordinateur, sans que les taux de transformation s’améliorent. Ils en ont conclu que des actions devaient être entreprises pour améliorer cela en termes de performances et d’expérience utilisateur. Ils se sont donc penchés sur les Progressive Web Apps.

L’une des premières Progressive Web Apps disponibles a été Twitter Lite, un client pour le célèbre réseau social du même nom. Ce client est devenu en avril 2018 le client par défaut sur mobile grâce à l’expérience utilisateur améliorée. Twitter s’est aperçu que suite au lancement de Twitter Lite, il y a eu une augmentation de 65 % en termes de pages visitées par session et une augmentation de 75 % en termes de tweets postés.

Côté français, plusieurs sociétés ont également sauté le pas. Nous pouvons citer par exemple Rue du Commerce, Weekenddesk ou encore Etam. Les résultats sont quasi les mêmes pour ces trois sociétés : des développements plus optimisés (une solution développée pour une seule plateforme) et des taux de transformation qui ne font qu’augmenter, se rapprochant...

Solutions concurrentes

Récemment, l’équipe de Google Chrome a décidé de déprécier les Chrome Apps en faveur des Progressive Web Apps. Pour rappel, les Chrome Apps étaient la solution permettant de développer des applications natives pour ordinateur. Comme ce navigateur dispose dès à présent de toutes les fonctionnalités nécessaires pour développer des Progressive Web Apps, l’équipe a tout simplement décidé de ne plus supporter cette première solution pour se concentrer sur la deuxième.

Mais les Progressive Web Apps ne sont pas limitées juste à ces types de projets. Pour nous en assurer, nous allons examiner les trois principales familles de concurrents qui existent à l’heure actuelle.

Les solutions que nous allons présenter ne sont pas de mauvaises solutions. Elles ont toutes des avantages et des inconvénients comme les Progressive Web Apps. Il faut tout simplement choisir la bonne technologie en fonction de l’application à développer ou encore des compétences disponibles en interne dans l’équipe de développement.

Ce qui ne sera pas abordé dans ce livre

Nous n’expliquerons pas en détail comment concevoir des Progressive Web Apps avec les frameworks/librairies permettant de créer des Single Page Applications. En effet, afin de faciliter la vie des développeurs, ces différentes solutions proposent des outils en ligne de commande permettant d’initialiser un nouveau projet. Lors de cette phase d’initialisation, ces outils permettent la plupart du temps d’activer les fonctionnalités présentées dans ce livre, en cachant leur éventuelle complexité. Nous préférons entrer dans les entrailles de ces différents standards afin que vous compreniez au mieux leur fonctionnement.

Le projet Hacker News readers as Progressive Web Apps (https://github.com/tastejs/hacker-news-pwas) permet de visualiser exactement la même application utilisant un framework/librairie convertie en Progressive Web App. Cela permet de voir rapidement l’implémentation qui a été choisie.

Nous listons ci-après les quelques commandes permettant de développer une Progressive Web App avec Angular, React ou encore Vue.js, ainsi que quelques liens permettant d’approfondir ce sujet.

Présentation de l’application fil rouge

Afin de mettre en pratique les différentes API qui seront abordées dans cet ouvrage, nous allons améliorer une petite application existante pour la rendre compatible avec les différents standards derrière le terme Progressive Web App. Cette application, développée pour les besoins de cet ouvrage, est un mini-client GitHub permettant de visualiser les projets d’un utilisateur. Une fois les projets listés, à la fin de cet ouvrage, l’utilisateur pourra également mettre en favoris certains d’entre eux.

Nous n’utilisons pas de frameworks, l’application est conçue avec du simple HTML, CSS et JavaScript. Une fois les projets d’un utilisateur GitHub récupérés, nous allons afficher plusieurs informations comme le nom du projet, le nom de la personne ayant créé le projet, la description et la date de la dernière mise à jour.

Afin de pouvoir travailler sur cette application, vous aurez besoin des outils suivants :