Tag : PWA

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

par Romain Boyer - Il y a 6 mois

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 , 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 !

Romain Boyer

Romain BOYER travaille pour des startups eCommerce depuis 2005. À cheval entre la technique et la stratégie, cet adepte des tableaux de bord croise toutes les données pour en extraire ses priorités. > Suivre Romain sur Twitter : @RomainBOYER > Son poste : Product Owner eCommerce chez Doctipharma.fr

6 Commentaires

6 réponses à “eCommerce : Comment mettre en place le Progressive Web Apps en 7 étapes”

  1. A noter que Magento prévoit les PWA dans sa version 2.4 d’après cet article -> https://firebearstudio.com/blog/magento-2-roadmap.html

  2. Romain Boyer dit :

    merci de ton ajout Benoît ! c’est une sacrée (r)évolution qui s’annonce, d’ici 2020/2021 du coup si on suit le rythme habituel des versions (voire un peu + pour celle-là)
    https://fr.wikipedia.org/wiki/Magento#Tableau_des_versions_de_Magento

  3. Tiana dit :

    Les PWA sont une très bonne alternative à ce qui existe aujourd’hui, encore plus pour le e-commerce. D’ailleurs, pour ceux qui se lancent, il faut penser d’abord mobile avant de penser desktop (ce qui est compliqué même pour les Millenials…).

  4. Wun dit :

    Bonjour,
    Connaissez-vous ce module PWA pour prestashop?
    https://addons.prestashop.com/fr/performance-site/28920-webkul-advanced-progressive-web-app-pwa.html
    Etant novice j’aurais voulu connaitre votre avis et savoir s’il est complet?
    Merci d’avance.

  5. Aurélien dit :

    Sur le principe j’adhère, par contre concernant la mise en place et des retours réels, vous avez des exemples ?

  6. Romain BOYER dit :

    @Aurélien, j’ai listé quelques exemples ici, le plus marquant étant Flipkart : http://www.info-ecommerce.fr/9808/le-futur-du-web-est-aux-progressive-web-apps
    Les fonctionnalités PWA des navigateurs s’étoffent, notamment avec la prochaine version de Chrome. Il n’y a aucun doute sur le fait que c’est la technologie de demain (pardon d’aujourd’hui) ; la seule question est donc si on veut être early adopter, suiveur, ou y aller 5, 10, 15 ans après les autres.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.


(Progressive) Web Apps – Le futur des Web/eCommerce/Applications est arrivé !

par Romain Boyer - Il y a 1 an

Il est temps qu’on reparle sérieusement des (Progressive) Web Apps (PWA) car les dernières innovations dans ce milieu créent une rupture technologique importante dans le milieu du Web, et vous ne pouvez pas ne pas être au courant à partir de maintenant.

Vous aurez dans cet article :

  • le détail des fonctionnalités disponibles
  • quelques stats (impressionnantes) de marchands ayant mis en place les Progressive Web Apps
  • les raisons pour lesquelles vous devez sérieusement considérer dès maintenant cette technologie

TL;DR (Too Long; Don’t Read)

Pour ceux qui manquent de temps pour lire l’ensemble de l’article, en quelques mots : les Progressive Web Apps (PWA) complètent la liste des fonctionnalités déjà disponibles via le Web (pour les Web Apps) et permettent vraiment désormais de concurrencer réellement les Applications Natives (iOS, Android,…).

Notifications « Push », Géolocalisation, Accès à l’appareil photo, les fonctionnalités dont on pensait qu’elles étaient réservées aux applications natives ne le sont plus. Il est donc temps de se poser les bonnes questions.

Les Web Apps offrent une vraie possibilité de s’éviter des développements d’applications longs et coûteux ainsi que la problématique des applications natives parfois trop éloignées du Web et avec un manque d’interactions possibles de ce côté-là.

Certaines sociétés comme Flipkart (leader de l’eCommerce en Inde) se sont déjà lancées avec un succès impressionnant, nous verrons leurs résultats plus bas ensemble.

Que sont les Progressive Web Apps et qu’apporte cette technologie aux Web Apps habituelles ?

Commençons par une petite information qui a son importance : il est important de ne pas confondre PWA et AMP (Accelerated Mobile Pages), qui sont un cache côté Google pour accélérer l’accès à la page depuis le moteur de recherche, et qui permet également d’avoir quelques extraits enrichis dans les résultats de Google. C’est intéressant également mais c’est autre chose, je vous en reparlerai bientôt ici avec un cas pratique.

Les progressive web apps sont une nouvelle façon de concevoir les flux d’information entre vos serveurs et le Web, de façon à améliorer performances et capacités offertes, notamment au niveau du mobile.

C’est donc principalement une question technique.

Mais ce que vous devez retenir est que l’application que vous envisagez peut probablement être disponible depuis le Web, à moindre coût, avec une très grande partie des fonctionnalités dont vous auriez besoin pour votre application.

Différences Web Apps / Progressive Web Apps : les fonctionnalités apportées par l’aspect Progressive (Web Apps)

Ce que vous devez savoir si vous n’êtes pas technicien à propos des PWA :

  1. les PWA permettent d’exploiter un cache au niveau du navigateur, ce qui permet
    1. d’améliorer les performances au niveau des chargements
    2. notamment un mode déconnecté
  2. les PWA nécessitent à 100% du HTTPS

Ce que vous devez savoir à propos des capacités de vos navigateurs aujourd’hui :

  1. La définition d’un manifeste sur votre site peut permettre aux utilisateurs d’enregistrer l’icône du site (haute résolution possible) sur le dispositif utilisé (surtout intéressant pour le mobile)
  2. Toutes les fonctionnalités inscrites ici avec une coche sont possibles (à regarder avec un smartphone de préférence car les coches dépendent de votre navigateur) : https://whatwebcando.today/

Comparatif Web Apps versus Applications natives

Sachant tout cela, faisons un petit récapitulatif/comparatif entre les Applications natives et les (Progressive) Web  Apps pour comparer une bonne fois pour toutes les fonctionnalités possibles entre applications natives et web apps. Tout en sachant que les fonctionnalités des navigateurs vont progressivement évoluer et le gap de fonctionnalités va tendre à se réduire.

Fonctionnalité App native Web App
Sécurité / HTTPS uniquement obligatoire sur iOS uniquement Oui
Besoin de télécharger/installer Oui Non
Compatibilité tous OS NON Oui
Connexion Internet nécessaire Non Non (grâce aux PWA)
Accès direct Non Oui
Possibilité d’ajout au favoris/navigateur Non Oui
1 seule App pour tous les dispositifs Non Oui
Capacités Push Notifications Oui Oui
Capacités Notifications Géolocalisées Oui Oui
Géolocalisation Oui Oui
Installation sur l’appareil = possibilité d’icône sur l’écran d’accueil Oui Oui (PWA)
Capacités touch Oui Oui
Accéléromètre / Compas / Gyroscope Oui Oui
Reconnaissance vocale Oui Oui
Accès appareil photo et micro Oui Oui
Vibration Oui Oui
Accès au niveau de batterie Oui Oui
Orientation portrait/paysage de l’écran Oui Oui
Capacité « plein écran » Oui Oui
Capacité de sortir du verrouillage Oui Non
Accès à l’alarme Oui (Android) Non
Interception des appels/sms Oui (Android) Non
Accès aux fichiers de l’appareil Oui Oui
Accès aux contacts de l’appareil Oui Non
Capture des URLs Oui Oui (PWA)
Fluidité de l’image Oui Oui (60 images par seconde)

Comme on peut le voir ici, la grande majorité des fonctionnalités (et la plus importante) est déjà déverrouillé, et la volonté est de faire suivre le reste.

A venir notamment : Bluetooth, NFC, Ambient Light Sensor (la petite led de notif qui clignote en couleur sur votre tel), le Proximity sensor qui dit la distance entre 1 objet et le dispositif utilisé, le détecteur de forme

Sources | Lecture plus avancée intéressante sur les possibilités du web mobile 

Vos intérêts à mettre en place les (P)WA

En gros, je vous la fais courte, quel que soit votre domaine d’activité, vous allez trouver un intérêt à avoir une Web App, et tant qu’à faire PWA.

  • Si vous avez des intérêts géolocalisés : géolocalisation et pushs géolocalisés (pas besoin d’avoir utilisé la PWA depuis le démarrage de l’appareil)
  • Si vous avez des intérêts marketing : les pushs marketing classiques sont d’un grand intérêt pour garder le contact (à utiliser avec parcimonie)
  • Dans tous les cas, les bonnes pratiques de cache vous permettront de meilleures performances (attention, le cache côté appareil peut réserver des surprises et est impossible à mettre à jour en cas d’erreur)
  • Si vous avez une app, vous savez qu’il est délicat de convaincre un utilisateur à l’utiliser ; l‘instantanéité d’accès permise par les PWA est un argument de poids
  • Ne serait-ce que pour les statistiques, les PWA vous permettent d’avoir accès à tous les services classiques du Web. et si vous avez un mode déconnecté, rien ne vous empêche de faire un mode asynchrone pour vos stats
  • Nul besoin de développer une application pour chaque OS (Android, iOS, Microsoft, Blackberry,…), votre site est directement compatible avec tous (ou presque). Pour ceux qui connaissent les coûts de telles application, il s’agit là d’une rupture importante qui s’annonce

Pour conclure, il y a bien peu de raisons aujourd’hui de ne pas partir sur cette technologie qui

Exemples / Etudes de cas

Quelques exemples / démos d’applications PWA pour vous convaincre ? ICI

pour les eCommerçants que vous êtes, FlipKart (même niveau de ventes qu’Amazon en Inde) a depuis l’utilisation des PWA (source) :

  • triplé le temps passé sur le site
  • augmenté de 40% le taux de ré-engagement
  • 70% de + de conversion pour ceux qui passent par le bouton d’ajout du raccourci sur l’accueil de l’appareil
  • 60% des utilisateurs des PWA Flipkart viennent de ce bouton d’accueil
  • 3x moins d’utilisation de la bande passante

Certains se sont risqués à faire un arbre de décision là-dessus, je vous laisse juger (RESS = framework pour faciliter certaines interactions ; exemples)

Comment vont s’opérer les migrations ?

Reste que les PWA sont une nouvelle façon de concevoir les sites Internet (la partie front surtout). Pour ceux qui ont déjà des systèmes d’information orientés vers les services (API), le changement sera plus facile mais pour d’autres, la migration sera certainement plus compliquée et coûteuse.

Il est possible que cela prenne plusieurs années ; il y a fort à parier que les plus gros sites Internet auront migré d’ici 5 ans. Twitter a d’ores et déjà opéré ce changement. Vu les gains possibles, les eCommerçants ont intérêt à passer aux PWA, mais le coût/temps nécessaire à cette adaptation est forcément un frein au changement.

L’évolution du mobile sur le marché et l’importance des performances pour ce type de supports devrait être la clé pour ce type de décisions. Et la possibilité des notifications pushs (géolocalisées ou non) la cerise sur le gâteau pour les marketeux.

 

Romain Boyer

Romain BOYER travaille pour des startups eCommerce depuis 2005. À cheval entre la technique et la stratégie, cet adepte des tableaux de bord croise toutes les données pour en extraire ses priorités. > Suivre Romain sur Twitter : @RomainBOYER > Son poste : Product Owner eCommerce chez Doctipharma.fr

9 Commentaires

9 réponses à “(Progressive) Web Apps – Le futur des Web/eCommerce/Applications est arrivé !”

  1. Prestarocket dit :

    Hello,
    Je te rejoins complètement sur l’intérêt des PWA.
    Chez Prestarocket, on utilise les services workers avec du Prestashop, côté back, pour une « app » de saisie des réceptions de commande qui fonctionne en offline.
    Un de nos prochains side project, est la création d’un site ecommerce semi-statique (statique pour la partie catalogue) sous Prestashop avec du offline et Algolia pour la recherche

  2. Super intéressant en tout cas et merci pour le détail des infos car je n’avais pas du tout suivi pour ma part. A part Flipkart, tu sais qui utilise ça aujourd’hui, en France notamment ?

  3. Romain BOYER dit :

    Nope, pas connaissance, justement, c’est le virage à ne pas manquer !

    On en aurait entendu parler, je crois :-p

  4. Merci beaucoup Romain, ça ouvre de belles perspectives… C’est fou comme finalement on en revient toujours aux fondamentaux, donc au web 🙂

    @Benoit : on s’y colle si tu veux 😉

  5. @François : je suis sous l’eau ^^ . Faut que je retrouve du temps pour des sides projects comme ça 😉

  6. gotcha5832 dit :

    bonjour,
    Je suis un peu border sur le sujet mais avez vous de exemples d’ecommerce passé en amp (hors ebay)?

  7. Romain BOYER dit :

    Bonjour,

    Web Apps et AMP, cela n’a pas grand chose à voir. Le format AMP appartient à Google et sert à créer une page qui sera stockée dans le cache de Google spécifiquement.

  8. Yo Romain, sauf erreur de ma part le micro est pas accessible depuis le browser sur IOS. Je n’ai trouvé aucun navigateur (Safari, Chrome, Firefox) qui peut le faire. Tu as un avis sur le sujet ?

  9. Romain BOYER dit :

    @Benoît, sorry pour le délai de réponse, dans l’article, j’avais mis un title sur le micro pour dire que ça allait arriver via la méthode GetUserMedia/Stream mais ce n’était pas encore d’actu, l’article le plus à la source serait : https://w3c.github.io/mediacapture-main/getusermedia.html#local-content

    J’en profite pour rajouter un chouette article, comme souvent, de ThinkWithGoogle sur les PWA orienté eCommerce : https://www.thinkwithgoogle.com/intl/fr-145/industry-perspectives/articles-internationaux/pourquoi-les-progressive-web-apps-sont-faites-pour-vous/

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.