eCommerce : Comment mettre en place le Progressive Web Apps en 7 étapes

Les Progressive Web Apps sont pour moi un tournant majeur de la conception des sites Internet. Un tournant un peu compliqué et qui nécessite pour beaucoup de se réinventer.

Je vous ai déjà fait un topo sur l’importance des PWA pour le eCommerce, je ne vais pas le refaire et je vous invite à le lire ou à le relire avant la lecture de cet article, beaucoup plus focalisé sur le « how to ».

Quand puis-je dire que mon site/mon application (cela veut dire exactement la même chose !) est PWA ?

Il convient de rappeler comment Google (créateur de cette appellation), caractérise la chose. Sont appelées des Progressive Web Apps des applications qui sont :

1. Progressives (pour chaque utilisateur, peu importe le navigateur)
2. Responsive (adaptées au support de l’utilisateur)
3. Indépendantes de la connectivité (doivent pouvoir marcher partiellement sans connexion)
4. « App-like » (claires, fluides et utilisables)
5. Fraîches (à jour)
6. Sécurisées (impossible de faire sans HTTPS de toute façon)
7. Découvrables (manifeste – = informations sur l’appli – défini de manière à permettre d’identifier des informations utiles pour les robots)
8. Ré-engageables (doivent utiliser les fonctionnalités comme le push pour faire revenir les utilisateurs)
9. Installables (icône sur l’écran d’accueil)
10. Partageables (faciles à partager via une URL)

Etapes d’implémentations que je vous suggère

J’ai identifié des étapes qui me semblent être de bons échelons, pour mettre en place progressivement l’ensemble des possibilités proposées par PWA.

Soyons clair, je manque comme la plupart d’entre nous d’expérience sur ce sujet, je vous propose donc cette feuille de route qui me semble logique, et que je vais aussi tenter de suivre de mon côté.

Si vous avez un avis pour enrichir le mien, n’hésitez pas, cet article n’est pas fait pour être figé, il devrait idéalement évoluer dans le temps grâce à vous ! (promis, je vous mentionnerai explicitement avec les modifs/ajouts qui me semblent intéressants !)

Dans cette feuille de route, chaque étape doit être un gain pour vous :

1. Installer le HTTPS (en profiter pour le HTTP/2)

Pour info ou rappel, Google a annoncé commencer à impacter l’absence de https sur votre positionnement, donc le plus tôt est le mieux.

Concernant le HTTP/2, une image valant mieux que de longs discours, je vous laisse admirer le schéma ci-contre, il est très explicite, vous voyez comme HTTP/2 permet de paralléliser les chargements plutôt que de les faire à la chaîne, il permet en fait de mieux exploiter les nouvelles capacités de bande passante permises par la plupart des connexions aujourd’hui.

2. Mettre en place les services workers pour pouvoir gérer les notifications push grâce au cloud messaging de Google

Là on entre dans la magie des nouveaux usages encore trop méconnus. Vous en rêvez mais vous n’osez pas, pensez que c’est trop compliqué ou trop cher.

C’est en réalité assez simple et gratuit.

En gros :

• vous mettez en place l’utilisation des « services workers », un nom barbare pour une fonctionnalité cachée dans votre navigateur, qui sert à pas mal de choses et ici en particulier à recevoir et transmettre à qui de droit des notifications push
• vous utilisez un service de push, par exemple Google Firebase Cloud Messaging (FCM), PushEngage, Axengage, qui demandent pour vous l’autorisation à l’utilisateur de communiquer directement avec son navigateur
• Vous sollicitez cet outil, qui transmet une instruction au navigateur ou au smartphone, qui transmet l’instruction à votre code
• Vous pouvez donc brancher un système de notification maison sur le navigateur ou sur le smartphone

3. Commencer à utiliser le cache persistant côté navigateur

Aïe, je décline toute responsabilité, c’est tout ce que j’ai envie de dire à ce sujet qui va piquer dans les chaumières.

En gros, tout ce qui ne change pas trop régulièrement peut être poussé dans le cache offline du navigateur. Les images, les JS, les CSS…. les contenus Web, eh oui ! tout, en gros, de manière à pouvoir créer un vrai mode offline (ou juste un cache partiel si c’est ce que vous voulez faire).

C’est très puissant mais lisez surtout les retours d’expérience et les moyens de se prémunir d’un gros problème inévitable : quand c’est caché côté navigateur, vous n’avez (presque) plus de moyen d’intervenir pour forcer la mise à jour du cache. Donc s’il y a un bug ou un mauvais contenu en cache… eh bien vous ne pouvez rien y faire jusqu’à ce que le cache expire !

Bon, il y a des moyens de prévenir, notamment grâce à un « fetch » initié côté navigateur et qui va vérifier s’il n’y a pas un forçage de mise à jour de cache à faire..

Imaginez un monde où quand vous faites un clic, il n’y a qu’un aller/retour serveur, un seul « hit » comme on appelle ça. ça serait toujours 200 hits en moyenne de moins que ce qui existe aujourd’hui…

4. Développer progressivement l’architecture orientée services et minimiser les flux de données

Et bien voilà, on y arrive. à 99% du temps, quand vous chargez une page, le langage de programmation compile un code pour le transformer en html et envoie tout le html à votre navigateur. Un HTML, dans le cas d’Amazon, ça peut peser 100 à 200 ko quand même.

Eh bien pourquoi ne pas charger le html qu’il vous faut avant, de manière à ce que lors des changements de page, il n’y ait que les nouvelles images et un flux de données de l’ordre de 0,1 à 2 ko qui soit échangé ?

5. Inciter à installer l’icône sur l’écran d’accueil

Bon, ça ce n’est pas très compliqué. Tout est ici : un manifest à pousser dans les entêtes html, une icône, un petit lien à pousser à vos utilisateurs, et vous obtenez la possibilité d’ajouter l’icône à votre écran d’accueil sur téléphone ! ça marche sur iOS comme sur Android, avec un petit bémol pour Android puisque l’icône « Chrome » apparaît en bas à droite de l’icône.

Quel meilleur moyen de faire revenir plus souvent vos utilisateurs fidèles (et de saouler ceux qui ne le sont pas encore) ?

6. Prioriser fortement les services chargés

Tant qu’à être dans l’état de l’art, autant charger les éléments les plus importants d’abord : le contenu principal, puis les services auxiliaires, publicités et autres ensuite, quand ça ne gêne plus personne (tant que ça ne crée pas de flicker effect, c’est à dire de choses qui se déplacent pendant que l’utilisateur commence à utiliser la page)

7. Commencer à gérer le mode hors ligne

On a commencé à en parler dans le point 3, allez au bout ! 🙂

 

Et si mon site est fait avec Magento / Prestashop / Autres CMS eCommerce ?

Vaste programme. Des initiatives existent ça ou là, rien qui n’ait encore cassé la baraque et qui soit suffisamment éprouvé pour être conseillé, mais nul doute que les solutions vont venir.

Le problème est en soi que ces solutions n’ont pas du tout été développées d’une manière à permettre d’implémenter facilement les micro-services qui envoient les mini-flux de données nécessaires aux PWA. C’est donc un vrai changement de paradigme.

D’autres solutions fleurissent et il est probable que des solutions plus adaptées pourraient émerger, et peut-être que Prestashop et Magento pourraient nous préparer des surprises, qui sait ; ce qui pourrait d’ailleurs être très perturbant pour pas mal de développeurs habitués des structures actuelles de ces solutions.

Conclusion

La loi de Pareto s’applique ici comme ailleurs, les 80/20 sont de rigueur et 20% des actions, les premières listées plus haut à mon avis, pourraient bien vous apporter 80% des bénéfices, donc n’hésitez pas à tester et à nous faire vos retours !

Je pense qu’il ne faut pas retarder + les expérimentations sur le sujet, il faut commencer à se faire les dents et prendre le virage dès que possible, et l’accélération qui va avec.

A un moment où les ordinateurs de bureau ne représentent plus que 35 à 45% des supports de visualisation d’un site eCommerce et où la fidélisation va plutôt du côté d’Amazon, il est temps plus que jamais de fournir tous les efforts possibles pour offrir la meilleure expérience possible et la plus grande proximité avec nos consommateurs !

Et si c’est un peu compliqué, des solutions pourraient bien vous y aider, à voir par exemple la solution Front Commerce, que je compte bien éprouver prochainement !