Les Progressive Web App (PWA) : Définition, fonctionnalités et fonctionnement

Format hybride entre un site web responsiv et une application mobile, les Progressive Web App font de plus en plus parler d’elles. Dans cet article, nous allons découvrir l’histoire des PWAs, les fonctionnalités qu’elles proposent et comment elles fonctionnent techniquement.

 

Un peu d’histoire…

L’histoire des PWA remonte aux années 2000, lorsque les technologies web ont évolué de documents statiques (HTML) à des solutions dynamiques exécutées côté serveur (PHP).

Cependant, avec l’arrivée des smartphones en 2007, les technologies web ne sont plus adaptées aux usages des mobinautes et l’émergence des applis offre une expérience utilisateur nettement supérieure.

Au milieu des années 2010, les améliorations continues en HTML5, CSS3 et JavaScript, ainsi que les navigateurs web plus performants et conformes aux normes, ont fait des applications hybrides une alternative viable.

En 2015, Frances Berriman et l’ingénieur de Google Alex Russell ont proposé le terme « progressive web apps » pour décrire les sites Internet profitant des nouveaux avantages offerts par les navigateurs web, notamment avec l’arrivée des Service Workers et des fichiers manifestes : les PWA sont nées !

Une PWA qu’est-ce que c’est ?

Les PWA sont un format hybride entre un site web responsif et une application mobile. Il s’agit d’applications web qui peuvent ressembler à des applications natives ou mobiles et qui combinent les fonctionnalités des navigateurs modernes avec les avantages de l’expérience utilisateur sur les appareils mobiles. Les PWA peuvent être consultées comme un site web classique, mais offrent une expérience similaire à celle d’une application mobile, sans les contraintes liées à celle-ci.

Les PWA offrent rapidité, fluidité et légèreté, tout en permettant de limiter considérablement les coûts de développement. Plus besoin de faire des développements spécifiques pour chaque plateforme (iOS, Android, etc.) !

Quelles sont les fonctionnalités d’une PWA ?

Les Progressive Web App offrent un certain nombre de fonctionnalités pour améliorer l’expérience utilisateur par rapport à un simple site responsiv design :

• ajout de l’icône de la PWA sur l’écran d’accueil
• chargement et transition fluide entre les pages
• gestion du mode hors ligne ou réseau dégradé
• accès à certains capteurs du terminal tels que le GPS, l’accéléromètre et le gyroscope
• envoi de notifications.

Il est important de noter que certaines de ces fonctionnalités, comme la gestion du cache pour le mode hors ligne, existent également en dehors des PWA, mais avec un certain nombre de limitations.

Techniquement comment ça marche ?

Techniquement, une PWA est composée de trois éléments clés :

1. Le respect d’un ensemble de bonnes pratiques pour garantir les performances et la sécurisation du site

2. L’ajout d’un fichier web app manifest (fichier JSON) qui décrit les propriétés du site

3. L’implémentation de service workers (fichiers JavaScript) qui permettent, en s’appuyant sur le cache du navigateur, de donner accès à l’application web en mode déconnecté et de gérer les push notifications. Les service workers permettent également de gérer les différentes versions du site et de rafraîchir le cache en cas d’évolution du site. Il est important de noter que PWA n’est pas un langage de développement ou un framework, mais plutôt une combinaison d’éléments qui reposent sur des standards existants.

PWA et retours d’expérience

De très nombreuses marques ont adopté les PWAs et vous les utilisez parfois sans vous en rendre. C’est par exemple le cas d’AliExpress, Best Western, Forbes, Pinterest, Rue du Commerce, Starbucks, Tinder, Trivago, etc… Ces entreprises ont constaté des améliorations significatives de certains indicateurs clés de performance (KPIs), tels que le taux de rebond, le taux de conversion, le nombre de pages par session et le panier moyen.

Les PWAs permettent également de fournir une meilleure expérience utilisateur en offrant des temps de chargement plus rapides et une consommation de données moindre. Il est noté que Twitter Lite, la version PWA de Twitter, a enregistré une augmentation de 65% des pages par session, une augmentation de 75% des Tweets envoyés et une baisse de 20% du taux de rebond. Rien que ça !

Vous trouverez d’autres retours d’expérience sur le site Pwa Stats