Bonjour, je suis Webmaster à Oullins à proximité de Lyon.
Passionné de nouvelles technologies et de Web, j'accompagne les entreprises désireuses de développer leur présence en ligne.

Les avantages des Progressive Web App (PWA) développées par Google

Les Progressive Web Apps sont l'une des technologies les plus intéressantes qui ont fait surface à la fin de 2015. Développées par Google, l'idée est de créer un site Web amélioré qui dispose des qualités d'une application mobile.

Qu'est-ce qu'une Progressive Web App (PWA)?

En bref, une Progressive Web App n'est rien de plus qu'un site Web traditionnel, mais avec des fonctionnalités supplémentaires, fournies par des concepts que nous connaissons déjà, mais regroupés dans un package appelé Progressive Web App.

Le terme a été utilisé pour la première fois par Alex Russel, un développeur de Google, et couvre trois fonctions distinctes; Un opérateur de service, un shell d'application et un manifeste JSON. Ensemble, ils constituent ce que nous appelons une PWA, et la combinaison de cela est très puissante.

La mise en œuvre d'une Progressive Web App sur la base d'un site Web existant offre de nombreux avantages: performances améliorées, meilleurs taux de conversion, fonctionnalités hors connexion et notifications push pour nommer certaines des fonctionnalités les plus intéressantes.

Par rapport à un site Web conventionnel, la PWA travaille en harmonie avec celui-ci, mais sert de couche entre le site Web et la connexion Internet, routant toutes les requêtes du navigateur via un script appelé Service Worker, qui affichera alors les résultats souhaités.

Techniquement, une PWA sauvegardera la page Web entière en local chez le visiteur, et mettra à jour seulement le contenu quand nécessaire. Ceci peut se faire en utilisant le Service Worker pour servir toutes les pages, les feuilles de style CSS, images et JavaScript, etc.. Tout cela sera stocké dans ce qui est généralement appelé un shell d'application. Ceci signifie que tout ce qui est nécessaire pour afficher la page sera stocké localement pour une performance optimale.

Ensuite, une fois qu'un utilisateur accède à une nouvelle page ou à une page avec du contenu mis à jour par rapport à la dernière visite de cet utilisateur, le Service Worker affiche le nouveau contenu en conséquence et le stocke également dans l'application. Bien que cela ne soit pas nécessaire, voici comment la majorité des implémentations actuelles préfèrent gérer le contenu mis en cache, et c'est la méthode suggérée par Google pour que les développeurs le gèrent également ainsi.

 

Quels sont les avantages

Voici une liste de certains des avantages de la mise en œuvre d'un Service Worker et l'amélioration progressive sur des sites Web existants:

- La mise en page adaptée fonctionne sur tous les périphériques;
- Réagit comme une application mobile;
- Accessible en mode hors ligne;
- Ajout d'un raccourci sur l'écran d'accueil;
- Notifications push;
- Performances améliorées.

 

Une mise en page qui fonctionne sur tous les périphériques

Les PWA induisent que tous les utilisateurs doivent accéder aux mêmes contenus et interfaces visuelles. Alors que les utilisateurs disposant de navigateurs supportés par les Services Workers verront tous les aspects positifs des PWA, les utilisateurs qui utilisent des navigateurs sans prise en charge des PWA verront toujours la même mise en page, quels que soient leurs périphériques, si bien qu'ils ne pourront pas profiter des divers avantages, comme le mode hors ligne ou les notifications push.

 

Réagit comme une application mobile

Parce qu'une PWA met en cache tout ce que l'on retrouve dans le "shell d'applications", nous avons la possibilité d'imiter l'apparence d'une application mobile classique, avec des éléments d'interface utilisateur, des animations, etc. Les lignes directrices de Google pour les développeurs recommandent de suivre un ensemble de bonnes pratiques qui garantiront que toutes les applications Web sont conformes aux normes d'une bonne interface utilisateur, en vue d'améliorer l'expérience utilisateur.

 

Accessibilité en mode hors ligne

La toute première fois qu'un utilisateur visite un site Web avec une PWA installée, un ensemble complet ou partiel de contenu mis en cache sera stocké localement sur le périphérique de cet utilisateur. Cela garantit que toutes les visites ultérieures serviront les pages presque instantanément, et ajoute la possibilité pour les utilisateurs de visiter les pages en mode hors ligne. Selon la façon dont les PWA individuelles sont développées, il est possible de mettre en cache tout le contenu, ou une partie de celle-ci, et il est également possible de montrer une simple page personnalisée hors connexion, ou de montrer la version 'live' avec du contenu mis en cache hors connexion.

Ajout d'un raccourci sur l'écran d'accueil

Une fois qu'un site Web répond à quelques exigences posées par Google, plusieurs navigateurs invitent maintenant les visiteurs à installer le PWA sur leur écran d'accueil, similaire à l'installation d'une icône pour un accès facile.

Alors que nous avons eu cette possibilité pendant un bon moment avec les signets et les sites Web, maintenant que nous pouvons accéder au PWA en mode hors connexion, cela ajoute une nouvelle dimension au concept, et couplé avec l'élément suivant sur notre liste, peut se révéler d'une valeur inestimable.

 

Notifications push

Chaque fois qu'un visiteur ajoute la PWA à son écran d'accueil, il peut être invité à accepter également les notifications push et ainsi recevoir des messages sur son périphérique automatiquement. Cela ouvre la possibilité à des sites Web d'exploiter un potentiel marketing jusque là monopolisé par les applications mobiles.

L'image ci-dessous montre combien d'utilisateurs acceptent cette invitation dans une étude réalisée par Google.

 
Performances améliorées

Des améliorations significatives ont été apportées lors de la comparaison des temps de chargement des pages et des tailles de page par rapport aux sites Web sans l'installation d'un Service Worker, sur les clients mobiles et ordinateurs de bureau. Ci-dessous une image sur la façon dont les applications Web progressives sont performantes, sur la base de la même étude effectuée par Google comme mentionné précédemment.



Nous voyons sur le graphique ci-dessous une augmentation de près de 30% de la performance sur les ordinateurs de bureau, et de plus de 22% sur les appareils mobiles en raison de la méthode de mise en cache efficace des services.

 

Résultats annoncés

Jusqu'à présent, nous avons vu des données impressionnantes provenant de certaines sociétés pionnières et de sites Web exploitant avec succès les possibilités et les fonctionnalités des Progressive Web Apps.

Ceci inclut AliExpress, qui a vu une augmentation de 104% de ses taux de conversion pour les utilisateurs visitant via sa PWA les écrans d'origine.

FlipKart Lite, un détaillant en ligne indien, a réussi à augmenter le temps passé sur le site de 70 secondes sur son application mobile, à 210 secondes sur leur PWA. Il a également vu une augmentation de 70% des taux de conversion, et trois fois moins d'utilisation des données en raison de la plus faible taille des pages.

 

Limites actuelles

Alors que l'avenir semble brillant pour les PWAs dans l'ensemble, il y a quelques exigences et limitations qu'il faut connaître.

Pour qu'un site Web soit éligible aux invites dans le navigateur et aux notifications push, le site Web doit être diffusé sur une connexion TLS sécurisée.

Actuellement, tous les navigateurs populaires ne prennent pas en charge ces fonctionnalités, notamment Safari d'Apple et Internet Explorer de Microsoft font défaut dans ce domaine. Alors que Microsoft a déclaré qu'il travaillait à la mise en œuvre de ces fonctionnalités, Apple, jusqu'à présent, a seulement ajouté quelques notes sur les PWA et les Services Worker sur la feuille de route de développement de son navigateur.

Bien que les PWA, de par leur nature même, fonctionnent indépendamment d'un navigateur, tous les utilisateurs ne bénéficieront pas de tous les avantages et, par conséquent, il appartient aux sites Web individuels de déterminer s'il est préférable d'attendre leur mise en oeuvre ou pas.

 


Conclusion

Ce sont des moments passionnants pour les développeurs Web et les entreprises qui n'ont pas l'intention de développer une application mobile native, puisque les Progressive Web Apps peuvent être comparativement meilleur marché à bien des égards.

Version AMP de l'article