Internet et les différents sites existant sont en constante évolution, avec de nouvelles manières d’afficher son site, de nouvelles manières de coder, et bien d’autres éléments. Ces dernières années, la progressive web app fait sa place et est prisée par les acteurs du digital, notamment les E-commerçants.
Mais qu’est-ce que qu’une progressive web app ? C’est un site Internet développé pour les mobiles. Elles sont développées en HTML 5, comme un site classique, en y ajoutant les fonctionnalités proposées par les applications. C’est donc une application disponible sur navigateur, mais offrant l’expérience des applications natives.
Il y a néanmoins des différences avec les sites mobiles, qui désignent un site qui s’affiche lorsque l’utilisateur accède au site en question avec son smartphone, ou encore les sites responsive, qui est le même site, mais avec un design qui s’adapte à l’écran utilisé par le visiteur. Les applications mobiles natives désignent quant à elles des applications proposées sur les stores des différents OS.
Quelles sont les utilités des PWA ? Quelles sont leurs applications en terme d’E-Commerce ? Quels sont les moyens de créer sa propre progressive web app ? Nous allons répondre à toutes ces questions dans cet article, et inclure quelques exemples.
Les progressive web apps au service du E-Commerce
Les progressive web apps ont plusieurs avantages, spécialement pour les boutiques en ligne. Celles-ci sont plus rapides et permettent d’afficher parfaitement son site sur un écran de smartphone. Voici certains avantages des progressive web apps :
Augmenter son taux de conversion
Le taux de conversion est l’une des KPIs les plus prises en compte par les E-commerçant. La conversion d’une boutique en ligne dépend fortement de la vitesse d’affichage et de chargement du site. Les progressive web apps permettent d’améliorer le temps de chargement de sa boutique en ligne, sur smartphone.
Les consommateurs achètent de plus en plus avec leur smartphone. L’utilisation de ce type de produit implique néanmoins plusieurs choses, comme l’adaptation du site à l’écran de l’utilisateur, ou encore le temps de chargement précédemment cité. La PWA permet également d’éviter le téléchargement d’une application mobile.
En plus de cela, elle permet, comme une application mobile classique, d’envoyer des notifications push à l’utilisateur. Cela aide donc à attirer l’attention de l’utilisateur, le fidéliser, et augmenter votre taux de conversion.
Enfin, l’utilisation d’une progressive web app permet d’augmenter la satisfaction des utilisateurs, influençant encore une fois le taux de conversion de son site E-Commerce. Éviter le téléchargement d’une application et proposer un site rapide et bien affiché permet de satisfaire le consommateur, qui sera plus enclin à acheter, et que vous pourrez plus aisément fidéliser.
Améliorer son SEO
Pour les E-commerçants, le SEO est le nerf de la guerre. Ce canal d’acquisition est organique et est basé sur le référencement sur les moteurs de recherche.
Google, leader des moteurs de recherche, utilise l’index mobile first, qui prend en compte la responsivité et l’adaptabilité des sites sur smartphone. Proposer une PWA permet donc de ravir le moteur de recherche en affichant un site bien adapté aux écrans de téléphones.
Ensuite, le développement d’une progressive web app est équivalent au développement d’un site classique. Contrairement à une application mobile, la PWA peut être référencée sur les moteurs de recherche. Si celle-ci est rapide, vous aurez plus de chance de vous classer dans le haut des résultats sur Google.
Accessible partout, tout le temps
Contrairement à une application mobile ou un site Internet classique, la progressive web app est accessible partout (comme on l’a dit, sur smartphone), tout le temps. Il est effectivement possible d’accéder au site en hors-ligne. Un consommateur pourra donc accéder à votre site, qu’il soit dans l’avion ou dans une zone blanche, sans réseau.
De plus, puisqu’elle ne demande pas de téléchargement, elle peut être consultée sur les smartphones en mal d’espace mémoire.
Enfin, votre site sera accessible sur tous les systèmes d’exploitation mobile, ainsi que tous les navigateurs. Cela vous évitera donc de créer des applications spécialement pour l’App Store et le Play Store, ou de vous soucier des problèmes de compatibilité des navigateurs. En plus de cela, vous n’avez pas à vous contraindre à respecter les guidelines de développement et de proposition des applications des systèmes d’exploitation mobile.
Comment créer une progressive web app ?
Plusieurs étapes sont à prendre en compte dans le développement d’une progressive web app. On peut notamment citer : la définition et la conception d’une app shell (interface système), les service workers et la gestion du cache en optimisant le chargement de son contenu, la définition d’un manifeste d’application ainsi que la proposition d’une navigation sécurisée.
L’application shell
L’interface système contient les composants de développement d’un site Internet classique (dont les langages de programmation HTML, CSS et JavaScript). Cela vous permet de vous concentrer sur l’essentiel du développement de votre application, tout en optimisant sa vitesse.
Le site n’est pas chargé à chaque visite de l’utilisateur, mais le contenu le plus important est préchargé pour optimiser la vitesse d’affichage.
Les service workers
Cela désigne un fichier JavaScript jouant le rôle de proxy entre votre progressive web app, le réseau ainsi que le navigateur, synchronisant les données entre ces entités. Celui-ci communique avec vos scripts via une API, puisqu’il n’a pas accès au DOM de votre site.
L’objectif de ce fichier est donc d’améliorer les performances de votre progressive web app en gérant en temps réel toutes les informations nécessaires à l’affichage de votre site, et en chargeant en arrière-plan.
Le manifeste d’application
Ce manifeste permet de fournir des informations, comme son nom, son icône, sa description, les spécificités d’orientation de la page, etc. dans un document texte. C’est comme la carte d’identité de la progressive web app.
La navigation sécurisée
La sécurité des internautes est un des éléments essentiels à prendre en compte lors du développement d’un site, qu’il soit mobile ou non. Il faut donc vous assurer que votre site propose un accès via HTTPS, grâce à un certificat SSL, par exemple.
Les exemples de progressive web apps
Les progressive web apps prennent une importance de plus en plus marquée, grâce à tous les avantages qu’elle propose. Plusieurs types de site se sont donc mis à la page et ont choisi ce type de fonctionnement pour afficher leur page sur mobile :
L’Équipe : la progressive web app sportive
Média sportif, l’Équipe était l’un des premiers médias à lancer une progressive web app. Les objectifs du média étaient notamment de proposer un mode offline et d’améliorer les performances du site afin de fidéliser les utilisateurs du site mobile.
Le développement de cette progressive web app a permis au média sportif de :
- gagner en temps passé à chaque visite (+4%, passant de 225 à 234 secondes)
- améliorer les performances du site (passer de 54 à 7 secondes de chargement en 3G, passant d’un poids de 3,2Mo à 1,3Mo)
Pinterest : la progressive web app sociale
Le réseau social a pour ambition de se développer à l’international. Afin de faciliter ce développement, Pinterest a opté pour le développement d’une progressive web app, afin d’en faciliter l’usage sur smartphone.
Le développement de cette progressive web app a permis au réseau social de :
- gagner en temps passé à chaque visite (+40%, passant à un temps supérieur à 5 minutes)
- générer plus de clics (+50% de clics)
- améliorer les performances du site (passer de 23 à 5,6 secondes de chargement)
Uber : la progressive web app pour l’accès au service
Le fournisseur de service automobile a développé sa progressive web app pour proposer ses services aux clients dans les zones blanches, ou les endroits mal desservis. Pour connaître les performances de leur progressive web app, les équipes Uber ont testé leur application sur un réseau 2G.
Le développement de cette progressive web app a permis à Uber de :
- réduire le poids des données chargées (passant de 280 à 17kB)
- réduire le temps de chargement (passant à 2,5 secondes de chargement sur un réseau 2G)
AliExpress : la progressive web app au service des produits
Même problématique que Pinterest, AliExpress a pour ambition de développer sa domination internationale. Même procédé que le réseau social pour ce faire, le développement d’une progressive web app, permettant de s’adapter aux demandes M-Commerce des consommateurs.
Le développement de cette progressive web app a permis à la place de marché de :
- développer le taux de conversion des nouveaux utilisateurs (augmentation de 104%)
- gagner en temps passé à chaque visite (augmentation de 74%)
Les progressive web apps permettent donc d’améliorer ses metrics pour contenter l’utilisateur, et fournir une expérience fluide et sans accroc. Grâce aux différents exemples cités, on peut voir que les progressive web apps permettent de fournir des performances améliorées, permettant elles-mêmes d’augmenter le taux de conversion et le temps passé sur votre page.
Crédit image : Nikola Ilic
