Billets : Les PWA sont-elles adaptées au e-commerce ?

Les PWA sont-elles adaptées au e-commerce ?

Annoncée initialement comme la technologie du futur, y a-t-il un intérêt à implémenter une Progressive Web App pour un site de vente en ligne ?

L'idée de ce billet m'est venue à la suite d'un Tweet de Willem Wigman, développeur Magento. Sur ce Tweet Willem expose les résultats Google Page Speed assez médiocres de plusieurs sites Magento en PWA :

willem wigman (@willemwigman) a tweeté à 9:45 PM on mer., juin 10, 2020

Soyons honnêtes, l'analyse et la conclusion tirée par Willem n'ont aucun intérêt. Google Page Speed ne révèle en rien la qualité d'une PWA. Le front de Magento a nativement un score tout aussi mauvais.

La réponse de Sergii Shymko (ingénieur et architecte chez Magento) est cependant plutôt intéressante :

As years pass by after the initial #PWA hype, "it's the future" sounds less and less convincing. It may become an outdated over-engineered technology that never delivered on its promise before the future comes. Headless is the future (or present), but not necessarily PWA.

- Sergii Shymko

Alors les Progressive Web App ont-elles un avenir pour le e-commerce ?

Origine

En 2015, Frances Berriman (designer) et Alex Russell (ingénieur pour Google Chrome) introduisent pour la première fois le concept de Progressive Web App.

Evidemment lorsque quelque chose vient de chez Google, cela ne passe pas inaperçu.

L'idée de base est de proposer aux internautes une application Web qui fonctionne de la même manière qu'une application native.

Mise en oeuvre

Les PWA reposent principalement sur les Services Workers, un proxy placé entre l'application et le navigateur.

Avec l'interface de cache, il est possible de naviguer sur le site sans connexion, à condition de l'avoir visité au préalable en mode connecté.

Le principe fait rêver : on décide de placer dans le cache les ressources de notre choix (js, css, contenus, images...) et celles-ci restent accessibles hors connexion.

Ainsi, je pourrai imaginer transformer très rapidement mon site en PWA. Plutôt facile, il est entièrement statique. Je place les JS et CSS, mais également les 5 derniers billets dans le cache. Vous pourriez donc naviguer sur le site très rapidement (instantanément) et lire certains articles sans connexion.

Sur iOS le cache est limité à 50mb. Ce n'est que personnel mais je pense qu'il est préférable d'éviter de saturer la mémoire des téléphones des utilisateurs. Le choix d'iOS est une bonne chose.

Je pourrai également vous proposer d'ajouter l'application à l'écran d'accueil et vous envoyer des pushs.

Une Progressive Web App n'est pas plus compliquée que ça. Un très bon exemple basique de PWA est proposé par James Johnson : Hello PWA.

Navigateurs

Entre l'annonce de Google en 2015 et 2018, il ne se passe concrètement pas grand-chose. Les bases sont posées, et bien que Chrome implémente les Services Workers dès janvier 2015, ce n'est pas le cas des concurrents.

Certains "Early Adopters" l'utilisent, mais de manière générale le coût d'implémentation n'est pas justifié par rapport au marché.

Il faudra donc attendre 2018 pour que ça bouge avec l'arrivée des Services Workers dans Edge et Safari.

C'est d'ailleurs en 2018 qu'émergent les premières applications PWA pour Magento : Deity Falcon, Vue Storefront, Front-Commerce, PWA Studio... C'est aussi la réponse à un front natif peu populaire et inutilement complexe.

Application

Placer l'intégralité d'une page en cache pour une consultation hors ligne implique les mêmes problématiques qu'avec les solutions de cache serveur : Varnish et les ESI ou un FPC avec de l'Ajax.

Comment rafraîchir les zones dynamiques d'une page si tout le contenu est en cache ? Pour cela les frameworks tels que React, Vue.js ou Angular sont parfaitement adaptées. L'idée est de créer un shell (l'emballage de l'application placée en cache) contenant tous les éléments statiques et de servir le contenu via des APIs (REST, GraphQL...).

Nous obtenons alors ce que certains appellent une application Web "moderne". Cela a également l'avantage de proposer un front complètement isolé et indépendant d'un CMS / ERP.

Si vous utilisez Firefox et que vous indiquez la commande suivante :

about:debugging#workers

Vous obtenez un apperçu des sites sur lequels vous naviguez et qui implémentent les Services Workers. J'ai pour ma part majoritairement de gros acteurs : Slack, Banggood, Invision, Pinterest, Le Monde, Spotify, Reddit...

Limites

Les PWA sont, je pense, parfaitement adaptées à un intranet, une interface d'administration, un compte client, un service (streaming, réseau social...) mais pas pour du e-commerce.

Essayez de passer en mode hors connexion une PWA e-commerce. Vous aurez au mieux un message indiquant que vous êtes déconnecté et la possibilité de parcourir les pages déjà visitées, c'est tout. Il n'y aura rien d'autre à faire qu'attendre le retour du réseau pour continuer.

You are offline, some of the functionalities are limited.

The product, category or CMS page is not available in Offline mode. Redirecting to Home.

L'énergie dépensée à la mise en place de la Progressive Web App ne vaut peut-être pas la peine pour si peu.

La question du SEO est également très souvent abordée sur les PWA à base de JS (surtout les SPA, Single Page Application), car l'impact est important. Google est conscient que de référencer une telle application lui demande une énergie considérable, et propose le prerender (prerender.io, rendertron) pour une alternative HTML. Une sorte de cloaking autorisé. On ajoute une difficulté supplémentaire sur un sujet primordial.

Une PWA est un hybride entre un site et une application, il ne faut pas que cela soit au détriement des bonnes pratiques acquises sur nos sites depuis de nombreuses années : sémantique, accessibilité et interopérabilité.

Les arguments avancés en faveur des PWA sont discutables :

• la vitesse ? Certes, un site classique n'a pas un affichage instantané (grâce au shell), mais un TTFB inférieur à 200ms est largement acceptable, avec l'effet de chargement à 2 vitesses en moins (certains éléments dynamiques qui apparaissent au fur à mesure).
• un meilleur ROI ? Une PWA s'accompagne inévitablement d'une refonte totale. C'est l'occasion de faire mieux qu'avant mais cela aurait été certainement le cas sur un site traditionnel.
• une présence hors ligne ? Non, personne ne parviendra à naviguer correctement et à passer une commande sans connexion.
• un site du furur ? On ne peut prédire l'avenir, une technologie peut disparaître aussi vite qu'elle est apparue. C'est un choix stratégique mais en rien une avance sur la concurence.

Il faut également noter que de nombreuses fonctionnalités d'une application native ne sont pas disponibles sur une PWA : GPS, caméra, capteur d'empreintes... Il est fort à parier que cela ne soit jamais le cas (iOS ne supporte pas les pushs).

Les PWA sont portées principalement par Alex Russell (Chrome). Les autres navigateurs n'ont, à juste titre, aucune obligation d'implémenter les outils nécessaires à leur mise en oeuvre.

Un point important du Web c'est qu'Apple n'a aucune obligation de jouer au jeu de Google et suivre leur calendrier. Aucun navigateur ne devrait se sentir forcé de jouer le jeu de Google. Personne ne devrait avoir à jouer le jeu de Google.

- @HTeuMeuLeu

L'usage des PWA doit rester dans le cadre de projets bien spécifiques dont l'intérêt est réél. Pour un site e-commerce la Progressive Web App n'est, je pense, tout simplement pas utile. Investissez dans l'UI, l'accessibilité, le SEO, le SEA, la sécurité, mais pas dans une PWA.