La PWA : une solution mobile-centric prometteuse

Ecrit par
le

Tinder, Twitter, Pinterest, Forbes, Lancôme : qu’on ces grands noms en commun ? Chacun a lancé sa PWA. Depuis 2016, la PWA est sur toutes les lèvres et connaît un succès indéniable de l’autre côté de l’Atlantique. Ce framework souvent désigné comme « le futur du web mobile » est pourtant boudé en Hexagone : quelques médias se sont prêtés timidement à l’exercice, notamment l’Equipe, pionné en la matière, ou plus récemment Courrier International avec Réveil Courier, sa matinale. Pourtant les PWA ont énormément à offrir face à un marché des App natives moribond et un web encore bien trop desktop-centric.
La présentation PWA au SEARCH Y de Aleyda Solis n’a fait que le confirmer : les PWA représentent un parfait compromis entre les APP natives et le web traditionnel.
 

.@aleyda, the European Search Personality of the year no less, and International #SEO Consultant, takes a leap into the future of mobile experience : the #PWA. Don’t miss it ! pic.twitter.com/8v8XL9yMtg

— Search Foresight (@S4sight) 18 janvier 2019

 
L’expérience web sur mobile malheureusement s’est souvent ça :
écran mobile en cours en chargement
Les utilisateurs doivent attendre en moyenne 19s pour voir une page s’afficher sous 3G. Quand on sait que plus de 50% des mobinautes quittent un site passé 3s de chargement, pas étonnant que la conversion mobile soit en berne.
acces mobile résultant en une conversion
 
 
Retour sur cette technologie prometteuse, appelée à changer radicalement notre façon de concevoir et développer nos sites mobile.

Les PWA, le future de l’expérience mobile ?

Face aux APP natives, les PWA ont quelques arguments de taille : peu coûteuses à développer et progressives, elles permettent de se libérer du joug des app stores et s’installent aisément sans consommer de mémoire.
Face à un site web classique, elles adoptent une interface « app-like » et responsive. La possibilité d’installer une icône sur l’écran d’accueil et d’envoyer des notifications push permet d’optimiser le taux de ré-engagement. Les services workers permettent une utilisation en situation de mobilité optimale, avec la possibilité d’accéder hors connexion et la mise à jour continue.
L’enthousiasme outre-atlantique n’est donc pas prêt de s’éteindre, d’autant que la PWA s’exporte maintenant sur desktop :  Windows 10 accepte l’installation sur desktop des PWA depuis février 2018.
 

Just for kicks, here is @davatron5000‘s @godaytrip as a #PWA on a preview build of Windows 10! 🚀(inspired by: https://t.co/Flm63mmu6K) pic.twitter.com/t2Kr5MlTOX

— Kirupa 🍊 (@kirupa) 1 février 2018

… Mais les PWAs tiennent-elles vraiment toutes leurs promesses ?

De l’expérience immersive :

L’expérience utilisateur « App-like » reste limitée sur les PWA. Celles-ci ne jouissent pas par exemple de l’accès aux fonctionnalités des OA : le ARKit d’Apple, leVisual Core Chip de Google, etc.
Côté graphique, le look and feel d’une app native est difficilement reproductible sur PWA. Certes l’affichage plein écran fait oublier qu’on est sur un navigateur classique, mais l’utilisateur aura toujours l’impression d’être sur un site web responsive.
C’est ici qu’Houdini entre en scène. Houdini est un standard web en gestation qui permettra aux développeurs de communiquer directement avec le moteur de rendition CSS des navigateurs : au lieu d’appliquer des règles CSS pré-existantes, le développeur est en mesure de créer et customiser ses propres règles.
Malheureusement, Houdini n’est pas encore supporté par les navigateurs et encore en discussion au W3C. S’il se généralise, il offrira sans conteste de nouvelles possibilités graphiques pour les PWA.
historique de validation de Houdini

De l’accès hors connexion

Les Services Workers embarqués dans la solution PWA garantissent un accès hors connexion grâce à la synchronisation en arriêre fond et auoffline caching. L’utilisateur peut donc en théorie profiter des mêmes performances quelque soit la qualité de son réseau. En pratique, le bas blaisse car cette technologie n’est pas supportée par l’ensemble des navigateurs mobile.
navigateur supportant les services workers
Elle n’était notamment pas supportée par iOS Safari jusqu’en Mars 2018. Le navigateur mobile d’Apple ne supporte d’ailleurs toujours pas la synchronisation en arrière fond.
technologies supportant le background sync
 
A date, seuls Chrome for Android et Opera Mobile permettent de jouir de l’ensemble des fonctionnalités autorisées par les Services Workers.

De l’indexabilité

L’indexabilité des PWA constitue un de leurs grands avantages. Leur découvrabilité depuis un moteur de recherche permet de faire l’impasse sur les App Stores et les stratégies d’ « App indexing ».
Force est de rappeler que loin d’être d’emblée « SEO-friendly », les PWA impliquent de mettre en place les bonnes pratiques classiques du SEO : autorisation de crawl, implémentation des metatags SEO, conception d’une architecture hypertexte optimale, etc. Sans oublier, la gestion du renderding JS pour les moteurs via l’hybrid rendering ou le  Server Side Rendering.

De la rapidité

La rapidité promise par la solution n’est pas non plus toujours au rendez-vous : en cause ici, une confusion entre le développement Single Page Application (SPA) et les PWA. Cette confusion est liée à la communication de Google autour de la PWA : en insistant sur le modèle dit App Shell, la Google Team a instillé l’idée qu’une PWA devait être développée selon un modèle SPA.
modélisation du développement app shell
Or une SPA consomme des ressources JS importantes, qui en retour ralentissent considérablement les performances. Une PWA peut tout à fait et devrait être conçue comme un site web classique, doté d’une arborescence, d’une multiplicité de template et d’URL « en dure ».
 
En résumé, la PWA crée une petite révolution mais n’est pas une solution magique. Certes, ce framework met à disposition des développeurs des technologies mobile-centric enthousiasmantes. Pour autant, cela ne dispense pas de concevoir un socle technique sain, SEO-friendly et orienté performance.  La PWA demeure une technologie en gestation, appelée à intégrer d’autres technologies en son sein dans les années à venir.
Si vos objectifs sont les suivants : fidéliser vos utilisateurs mobiles, optimiser vos performances, ou asseoir votre image d’innovateur; alors vous pouvez sauter le pas. Sachez cependant raisonner vos attentes et préférer vous entourer de développeurs web, familier du HTML, JS et CSS, plutôt que d’un profile full stack.
 Nouveau call-to-action