Dans notre dernier article nous avons évoqué l’influence croissante du mobile sur nos usages, y compris sur desktop, une influence qui s’illustre dans un nouveau concept, les Progressive Web Apps. Aujourd’hui, nous allons nous pencher plus précisément sur ce qui caractérise ces PWA et la manière dont elles opèrent.

 

En tant que concept les Progressive Web Apps attirent de plus en plus l’attention, empruntant au meilleur du web d’un côté et aux apps natives de l’autre, elles réduisent le fossé entre apps natives et web apps.  

Si les apps natives ont rencontré le succès qu’on leur connaît, c’est parce qu’elles permettent aujourd’hui l’expérience utilisateur la plus aboutie, sur mobile, qu’il s’agisse du rendu visuel ou des fonctionnalités proposées. Néanmoins, elles se heurtent à des limitations inhérentes à leur technologie, en matière d’engagement des utilisateurs avec l’écueil du référencement, dont découle bien souvent la difficulté à faire découvrir son app, ainsi que le passage obligé par l’acte d’installation. Des freins que les PWA entendent dépasser, tout en convergeant à la fois vers ce que font les apps.  

Pour mieux comprendre les spécificités des Progressive Web Apps il faut commencer par examiner les principes qui sous-tendent le concept, autrement dit comment une Progressive Web App se doit d’être 1) Fiable, 2) Rapide, 3) Engageante. Dès lors, on entrevoit qu’une PWA c’est avant tout une expérience utilisateur. C’est donc avec l’utilisateur à l’esprit que les développeurs se tournent vers un panel de technologies issues du web, d’outils et de bonnes pratiques, pour établir en retour de nouveaux standards, sur le web, et sur tous les écrans. 

En matière d’introduction aux spécificités des PWAs du point de vue technologique nous avons discuté avec Jean-Mathieu, développeur Angular chez GoodBarber :

 

Fiable

L’une des caractéristiques majeures d’une Progressive Web App, c’est sa capacité à opérer hors ligne. Du côté de l’utilisateur il s’agit d’éviter l’affichage du message d’erreur tant redouté en l’absence de connexion ou d’un réseau suffisant.  

Pour délivrer du contenu à l’utilisateur offline, une PWA s'appuie tout d’abord sur l’app shell, qui permet d’appeler la structure de la page, cela même si le contenu ne répond pas, il s’agit par exemple du header et d’un layout donné, et d’illustrer le chargement, afin que l’utilisateur soit informé que quelque chose est en train de se passer. Un progrès par rapport au message d’erreur qui jusqu’ici faisait passer à l’utilisateur son chemin.  

Par ailleurs, pour rivaliser avec le look and feel des apps natives, le design d’une Progressive Web App doit être adaptatif. Le responsive est donc un impératif pour une PWA, quelle que soit la technologie qui l’administre. Pour l’utilisateur c’est l’assurance d’une transition fluide d’un appareil à l’autre, toutes tailles d’écrans confondues, toujours par souci de fiabilité. 

 

Rapide

En complément, une Progressive Web App s’appuie sur un service worker dont le rôle est notamment de mettre en cache, dès le premier chargement de l’app, le flux de contenu. De sorte qu’après la première visite, le contenu pourra aussi être accessible hors ligne, articles et détails articles compris. 

Ce comportement répond aux exigences du modèle RAIL introduit par Google : Respond / Animate / Idle / Loading ; en d’autres termes une Progressive Web App doit répondre à la requête de l’utilisateur, afficher une animation pour le faire patienter, utiliser le relatif temps mort ("idle") du chargement pour mettre en cache le plus de contenu possible et enfin se charger en moins d’une seconde ! Avec de telles ambitions on comprend nécessairement l’engouement de plus en plus d’acteurs du web pour le phénomène Progressive Web Apps.

 

Engageante

Si l’installation d’une application native peut représenter un écueil (engagement supplémentaire de la part de l’utilisateur), les Progressive Web Apps font de l’installation un véritable bonus. Sur mobile ou tablette, l’utilisateur est en effet invité, s’il le souhaite, à installer l’application sur son écran d’accueil. Cette "installation" est rendue possible grâce à l’app manifest, qui envoie aux navigateurs des informations comme l’icône (pour chaque taille de device), le splash screen (ou la couleur à afficher pour l’écran de lancement), le display en portrait / paysage ou les deux et enfin, l’option que l’app tourne en toute autonomie, indépendamment du navigateur.  

Les Progressive Web Apps challengent aussi les apps natives sur le terrain des notifications push. Si les notifications push sont intégrées pendant la phase de développement, leur fonctionnement appartient ensuite à la liste des tâches de fond du service worker. A ce jour, pour les PWAs, les notifications push sont supportées sous Chrome, Firefox, Opera et Safari sur desktop, mais non sur mobile pour ce dernier. Une réticence de la part d’Apple qu’on serait tenté d’attribuer au fait que les Progressive Web Apps sont une concurrence solide aux apps natives. Affaire à suivre… 

Enfin, les Progressive Web Apps s’inscrivent dans la mouvance d’une navigation web de plus en plus sécurisée, avec l’impératif côté serveur d’utiliser le HTTPs, on comprend mieux pourquoi les PWA sont à la croisée des chemins entre ce qui se fait de mieux sur desktop et sur mobile. On notera par ailleurs que le HTTPS deviendra bientôt également la norme pour les apps iOS, sur l’App Store. Dès lors, même s’il s’agit d’une exigence supplémentaire pour les développeurs, ce n’est pas non plus ce point qui empêchera demain les PWA de rivaliser avec les apps natives.

 

Si on devait maintenant isoler un élément clé pour définir la révolution Progressive Web Apps, ce serait sûrement le service worker. Comme le résume Jean-Mathieu, c’est le service worker et ses tâches de fond qui oeuvrent pour gérer les notifications push, l’offline, le cache, etc., autant de fonctionnalités qui distinguent les Progressive Web Apps. Sans oublier la parenté manifeste (sans jeux de mots) avec le mobile, puisqu’une Progressive Web App c’est aussi pour l’utilisateur, avant toutes choses, un "look and feel" natif.

 

Pour aller plus loin, Google propose sa checklist des caractéristiques des Progressive Web Apps, ici.