Améliorer l’expérience utilisateur en passant aux Progressive Web Apps (SEO Campus)

Par  le 13 avril 2018 - 17:52 dans

À l’origine de cette conférence sur la PWA au SEO Campus se trouve un comparateur de prix de la voiture d’occasion que RESONEO accompagne : Autovisual.com.

Laurent Debricon, co-fondateur de ce comparateur a pensé le site en mode offline first afin de les visiteurs puissent accéder au contenu quel que soit leur connexion. Il aussi fait en sorte que le site soit mobile-friendly avec des scénarios de mise en cache des données permettant d’accéder facilement aux données des recherches précédemment effectuées plus rapidement.

L’expérience utilisateur est donc un des axes de développement tout comme l’accès aux données à tout type d’utilisateur.

Ainsi, lorsque le concept des PWA fut relayé dans un événement SEO (voir cet article : Découverte des Progressive Web Apps au SEO Dawa Day 2017), le co-fondateur d’Autovisual s’est lancé dans l’aventure. En effet, il s’agit ni plus ni moins que de sa vision des choses mais développée par Google.

Conférence d'Audrey Schoonwater au SEO Campus 2018

Audrey Schoonwater – RESONEO

Les PWA : qu’est-ce que c’est ?

Les Progressive Web Apps ou PWA sont des sites web qui se comportent comme des applications natives et qui peuvent ainsi en exploiter le potentiel en matière d’icône sur l’écran d’accueil ou encore de notifications web push. Cela permet de fidéliser.

L’installation se fait de façon transparente pour l’utilisateur : il n’a plus qu’à cliquer sur l’icône de son écran d’accueil pour lancer le site web version PWA. Pour Autovisual, s’il n’est pas connecté, le comparateur affichera la dernière recherche et ses résultats ou sinon préviendra que la connexion est coupée.

De multiples scénarios peuvent être ainsi déployés dans la gestion du cache (rendus possibles par la technologie des Services Workers qui sont des scripts qui mettent en cache les données et qui les renvoient au serveur web lors de la prochaine connexion).

Progressive est le terme pour désigner le fait que plus le navigateur est moderne plus l’app peut profiter de ses possibilités, sans pour autant dégrader l’expérience de l’utilisateur qui viendra depuis un navigateur plus ancien.

Pour autant la technologie Service Workers qui permet d’avoir toujours les données en cache et d’avoir la sensation d’avoir une connexion impeccable même lorsque l’on capte mal n’est pas encore déployée sur tous les navigateurs. Google avec Chrome en est à l’origine, suivi de Mozilla. On espère avoir de bonnes nouvelles avec iOs courant 2018.

Quels sont les avantages et enjeux des PWA ?

Comme le démontre la présentation disponible sur le Slideshare RESONEO :

78% du temps est passé sur top 3 des apps natives alors que la moyenne est app installée par mois est quasi nulle !

Ces mêmes utilisateurs ne vont sur le web mobile d’à hauteur de 13% vs les applications natives.

C’est la raison pour laquelle, Google a pensé relier le web mobile aux capacités des applications natives via les PWA. En effet, elles sont plus rapides et plus fiables tout en disposant d’une expérience intégrée.

Autovisual

L’objectif est de réengager l’internaute via les notifications, de proposer une ergonomie optimisée et d’aller plus loin que l’app native qui, elle, n’est pas partageable depuis une URL.

Pour l’aspect sécurisation des données le HTTPS est obligatoire.

C’est ainsi que Google a poussé son outil d’audit Lighthouse qui est désormais utilisable pour les audits SEO.

Lighthouse Google

Les formulaires saisis en mode hors connexion peuvent être envoyés lors de la prochaine connectivité disponible.

Dino

Cette conférence a aussi été l’occasion de montrer le déploiement accéléré via une librairie JavaScript proposée par Google : Workbox.

Logo Workbox

Enfin, comme il s’agit d’un site web, on peut également y placer un marqueur Analytics et le faire envoyer les données dès que la connexion est revenue.

On peut donc faire un suivi assez détaillé de l’utilisation de la PWA en version déconnectée.

Nous attendons avec impatience les Service Workers sur iOS et l’arrivée de nouvelles PWA pour un web offline first !

Tweet about this on TwitterShare on LinkedInShare on FacebookShare on Google+Email this to someone
Partagez cet article!
Aucun commentaire