PWA, partie 3: technologie et secrets UX d’applications web progressives (PWA)

Un coup d’œil dans la boîte à outils des PWA

Comme nous l’avons déjà décrit dans la partie précédente de notre série, les applications web progressives ont pour but de proposer aux usagers une expérience d'utilisation qui ne serait autrement possible qu’avec des applis en natif. Les applications web progressives utilisent à cet effet les technologies les plus récentes dans les navigateurs web modernes et ont recours à des fonctions comme la gestion d’antémémoire ou les notifications push.

Les développeurs d’applis (web) exploitent les technologies web ordinaires les plus modernes comme HTML5, CSS 3 et JavaScript pour pouvoir offrir une expérience utilisateur suprême (UX). En outre, Service Worker et Web Manifest interviennent – nous souhaitons t’expliquer dans cet article de blog quelques termes fondamentaux ainsi que des possibilités et concepts nouveaux.

Expérience utilisateur et technique

Avant d’aborder les aspects techniques, remémorons-nous les principales caractéristiques d’une application web progressive au niveau de l’expérience utilisateur. Le ressenti subjectif et les préférences personnelles des différents utilisateurs jouent ici naturellement un rôle, jusqu’à un certain degré. Une PWA se compose principalement des quatre caractéristiques suivantes:

• Chargement rapide

• Bien intégré. L’utilisateur démarre la PWA sur une icône de l’écran d’accueil

• Fiable même si la connexion Internet est mauvaise ou inexistante

• Invite l’utilisateur à interagir ("engagement")

Venons-en maintenant à la technique. Trois éléments sont ici absolument indispensables – ils transforment pour ainsi dire un site Internet classique appelé par un navigateur en applications web progressives:

• Connexion HTTPS

• Web Manifest

• Service Worker

HTTPS - La sécurité importe beaucoup!

Le protocole HTTPS intervient impérativement lors de la transmission des données entre le serveur et le navigateur sur lequel fonctionne la PWA. Les données sont protégées d’un accès illicite grâce à un cryptage et une authentification mutuelle.

L’appli Web Manifest – Pour établir les règles du jeu

L’appli Web Manifest, à savoir le manifeste d’application en français, consiste en un fichier sur le serveur web, qui établit quelques règles du jeu fondamentales pour les applications web progressives. On y définit, par exemple, l’icône qui sera utilisée lorsque, en tant qu’utilisateur, on souhaite ajouter la PWA à l’écran d’accueil. Le développeur y détermine également si les éléments classiques du navigateur comme la ligne de l’adresse doivent être masqués. Si la PWA fonctionne en mode plein écran, on obtient, en tant qu’usager, la même expérience utilisateur visuelle que lorsque l’on emploie l’appli installée.

Service Worker - Des éléments de transition reliant aux caractéristiques natives

Les Service Worker sont en quelque sorte les prestataires en arrière-plan d'une application web progressive. Ils permettent en grande partie une expérience utilisateur "similaire à celle de l’appli", car ils fonctionnent, entre autres, comme mémoire tampon (antémémoire) pour la communication avec le serveur web. On s’assure ainsi que la PWA peut être chargée rapidement lorsqu’on y fait appel.

Un Service Worker est cependant aussi responsable de la poursuite de l’utilisation de l’application web progressive, même sans connexion au réseau ou avec une très mauvaise réception.

Ils traitent aussi l’envoi de notifications (push). Les Service Worker consistent en un fichier JavaScript et fonctionnent sur le navigateur. Ils sont néanmoins séparés du reste du site Internet, ou donc de la PWA.

Processus de chargement PWA

Nous connaissons tous parfaitement ce déroulement : nous appuyons sur l’icône et l’appli s’ouvre – nous réalisons ces étapes dans l’interaction avec notre appareil portable des dizaines de fois par jour sans trop y réfléchir.

Dans le cas d’une application web progressive, cela se passe un peu différemment, surtout si on l’ouvre pour la toute première fois. Tout comme pour un site Internet, la PWA est appelée par une URL ou un lien sur le navigateur qui envoie la demande au serveur web.

Le graphique suivant présente le déroulement de façon schématique. L’application web progressive est consultée bien que la requête ne soit pas envoyée directement au serveur web, mais passe d’abord par quelques étapes intermédiaires importantes.

Le Service Worker représente la première étape intermédiaire bien qu’un écran appelé Splash Screen, un écran d’accueil, puisse être affiché comme espace réservé pour faire la transition, même si ce n’est pas forcément idéal au niveau UX.

La question de la stratégie relative à la mémoire tampon est aussi posée dans le Service Worker. Il s’agit ainsi en principe de déterminer si toutes les données du serveur web doivent absolument être consultées (online first) ou s’il faut les charger partiellement ou même complètement à partir de la mémoire tampon locale (offline first).

L’App Shell (la "coquille" de l’appli) doit en tout cas être chargée rapidement. On entend par cela l’interface utilisateur (UI), fondamentale, d’une PWA, composée de HTML, CSS et JavaScript. Elle veille à ce que l’UI de la PWA apparaisse aussi rapidement que possible sur l'écran de l’utilisateur. Si cette App Shell est sauvegardée dans l’antémémoire, le processus de chargement sera même encore plus rapide lors d’une nouvelle visite ultérieure de la PWA. Comme nous l’avons déjà mentionné ci-dessus, cela dépend de la stratégie d’antémémoire choisie.

Le Service Worker peut être configuré pour que l’App Shell soit chargée à partir de l’antémémoire et que seuls les contenus devant être affichés soient pris sur le serveur web. Ainsi, d’une part, l’utilisateur bénéficiera d’un démarrage rapide de la PWA et d’autre part, il sera assuré de ne voir toujours affichés que les contenus qui correspondent à l’état actuel des choses.

Pas d’App Store – Le navigateur permet de les trouver et de les utiliser

Cependant, l’interaction avec le contenu de la PWA sur un écran n’est pas le seul composant de l’expérience utilisateur. En effet, elle débute bien plus tôt: à savoir en se demandant avant tout comment l’utilisateur atterrit sur la page d'accueil d’une application web progressive.

Beaucoup d’activités en ligne débutent par la saisie sur un moteur de recherche. Il ne faut pas négliger cet aspect quand il s’agit de savoir comment une application web progressive sera, avant tout, trouvée. Le robot traqueur d’un moteur de recherche indexe une PWA exactement comme s’il s'agissait d’un site Internet ordinaire et permet ainsi à des millions d’utilisateurs potentiels de la trouver et d’y accéder.

La complexité de la conduite du trafic d’un moteur de recherche vers des applis installées peut varier. Si l’utilisateur n’a pas installé l’appli, l’App Store se manifeste automatiquement comme un obstacle entre les deux. Les applications web progressives simplifient l’approche de nouveaux utilisateurs avec l’optimisation du moteur de recherche car elles proposent une expérience globale plus fluide et sans embûches: un clic sur le résultat des recherches conduit l’utilisateur directement sur la PWA.

Comment les PWA vont-elles évoluer?

Les possibilités techniques – et parallèlement à cela, l’expérience utilisateur – des applications web progressives évoluent en permanence à un rythme accéléré. Lors de la conférence pour développeurs Chrome Dev Summit en 2018, Google a, par exemple, annoncé davantage d’interfaces qui seront à disposition des applications web progressives sur le navigateur Chrome. En outre, le soutien PWA est maintenant aussi habituellement activé dans la version bureau de Chrome. Nous nous efforçons de tester constamment les dernières possibilités des technologies web mobiles, de partager nos connaissances sur ce blog et de proposer à nos clients de véritables plus-values et d’excellentes prestations pour la numérisation de leur entreprise et au niveau du marketing sur appareils mobiles.

As-tu des contributions ou des questions relatives aux PWA ou en général sur les technologies web? Envoie-nous un Mail. Nous nous réjouissons aussi de toutes les visites à nos bureaux de Bâle ou de Berne.