Progressive Web Apps, une autre manière d’envisager l’expérience mobile

29 Mars 2017
pwa-blog-article-bewoopi.jpeg

La situation actuelle

Aujourd’hui, l’économie digitale est au centre d’un casse-tête marketing. Le temps passé sur des appareils mobiles est en croissance très rapide, au détriment de l’expérience sur ordinateur, et cette hausse concerne le web mobile ainsi que l’utilisation d’applications. En revanche, si le nombre total de vues est à l’avantage du web mobile, le temps total d’usage est très largement supérieur pour les applications mobiles, de l’ordre de 7 pour 1. Le motif de cette inclinaison des utilisateurs et des développeurs vers le natif (ou les applications hybrides) provient principalement des fonctionnalités qu’il offre : Gestion des connexion lentes / du hors ligne, réception de notifications push, synchronisation des données en arrière-plan… Des éléments techniques donc, sur des considérations de performances et de fonctionnalités, qui favorisent les applications par rapport au web mobile. Mais tout ceci pourrait changer prochainement.

comscore

Qu’est-ce qu’une Progressive Web App ?

Pour essayer de concilier ces deux modèles en apparence concurrents, Google travaille depuis plusieurs années sur un concept combinant le meilleur du web et le meilleur des applications. Le but de ces PWA est d’utiliser les fonctionnalités les plus récentes du web pour offrir une expérience utilisateur de type application, en gardant les avantages du web.

On peut noter dans les caractéristiques avantageuses des PWA qu’elles sont :
– Reponsives: leur interface s’adapte à tout facteur de forme de l’appareil sur lequel on les exécute
– Capables de fonctionner hors ligne ou sur des réseaux à faible réception
– Capables de recevoir des notifications push
– Sûres (servies via HTTPS)
– Intégrables à l’écran d’accueil d’un appareil mobile comme n’importe quelle application mobile

Les PWA ne font pas qu’apporter des fonctionnalités issues du natif au web mobile. Elles règlent également de vrais problèmes auxquels sont aujourd’hui confrontés les éditeurs d’applications natives. En effet, le référencement sur les moteurs de recherche permet d’offrir de la visibilité à une application qui serait probablement invisible sur un AppStore au milieu des millions d’autres applications. L’absence de processus d’installation est une autre amélioration de l’expérience utilisateur: en effet, un rapport récent indique que 65% des utilisateurs téléchargent 0 application par mois, que ce soit pour des raisons de temps de la démarche, d’espace mémoire nécessaire ou simplement d’absence d’opportunité. Avec les PWA, les utilisateurs découvrent les apps naturellement via leur navigation web, sont invités à les installer lorsqu’ils ont manifesté un intérêt via des visites répétées. L’installation est alors instantanée avec une app très légère.

pwa-image

Par ailleurs, les éditeurs sont bien plus tentés par ce genre de développement, qui s’affranchit de l’aspect « un développement par plate-forme ». Les PWA fonctionnent partout sur le web, qu’elles soient installées ou pas, et peu importe l’appareil qui y accède. Cela diminue fortement les coûts de développement, facilite et fluidifie la maintenance, et permet une plus grande liberté dans la monétisation (pas de tranches de prix, aucun pourcentage reversé à Apple ou à Google).

C’est bien joli tout ça, mais comment ça marche ?

La pierre angulaire de ces nouvelles applications est baptisé Service Worker. C’est un script qui est exécuté dans le navigateur et qui permet de supporter des expériences hors ligne. Les Service Workers gèrent aussi la mise en cache de façon intelligente pour améliorer les performances de l’application et incluent d’autres fonctionnalités jusqu’ici réservées aux applications natives ou hybrides, comme la gestion de la localisation ou la réception de notifications push.

pwa-image-blog-bewoopi

Un Service Worker peut être comparé à un proxy cache qui s’exécute côté client. Son comportement est programmé dans un fichier JS qui s’installe dans le navigateur de l’utilisateur au premier chargement du site. Il s’exécute ensuite à chaque chargement de la Web App, et intercepte chaque requête HTTP pour renvoyer la réponse la plus adaptée, qu’elle provienne du réseau, d’un cache dédié ou même générée à la volée. Pour des raisons de sécurité, ces scripts ne peuvent fonctionner que sur les sites sécurisés avec HTTPS. Si aucune page n’a besoin de ce script (qui tourne dans un thread indépendant), il est mis « en sommeil » pour économiser de la batterie.

Ces Services Workers permettent de remplir les écrans au sein d’une Application Shell. Ce nom désigne la base de HTML/CSS/Javascript qui constitue la « coque » d’une PWA. L’application shell correspond à la partie de code qui serait envoyée sur l’AppStore pour une application native, il gère le chargement et la navigation dans l’application, et permet à l’interface utilisateur d’être exécutée de façon locale. C’est dans cette coque que les pages web sont chargées.

Une nouvelle manière d’envisager le web mobile ?

L’arrivée des Progressive Web App et l’effort que met Google dans leur amélioration vont changer notre manière de développer pour le Web.
Côté utilisateur, l’habitude de ne plus installer une application native pour tout sera une réelle nouveauté, un coup de main à prendre. Prendre conscience qu’un simple site puisse progressivement devenir une application complète qu’on ajoute à l’écran d’accueil, fonctionnant hors ligne, recevant des notifications push et se chargeant instantanément va changer les usages et faciliter les « installations d’essai ».

Côté développeurs, il faudra tenir compte de l’aspect encore neuf de ces PWA et passer par deux phases: La phase qui a déjà commencé, d’expérimentations en tout genre, pour prouver la viabilité du système et tester toutes ses limites, mais aussi identifier les bonnes et mauvaises pratiques. Puis la phase de démocratisation, qui viendra lorsque ces application d’un nouveau genre seront intégrées dans tous les frameworks Web.
Le support des Service Workers est déjà présent sur Chrome, Opera et Firefox, et viendra probablement sous peu pour Safari iOS et Internet Explorer/Edge pour les Windows Phone.

app-shell-pwa-blog-bewoopi.jpeg

Il appartient maintenant aux développeurs de faire fructifier les fonctionnalités existantes en mettant à disposition des mobinautes des Web Apps aussi proches que possible de l’expérience native, afin de convaincre les utilisateurs de leur intérêt, et ainsi accélérer le développement de ce qui pourrait être la prochaine révolution des usages mobiles.