Ces dernières années, les applications mobiles ont le vent en poupe ! Et pour cause, les appareils mobiles de plus en plus omniprésents dans notre quotidien ! Les modes de consommation ont changé, entre les smartphones pendant les pauses de courtes durées, dans les transports en commun et les tablettes à la maison, le e-commerce se voit depuis quelques temps changer…
Nous avons abordé dans ces derniers articles les applications mobiles sous différents aspects. Aujourd’hui, nous allons nous attarder sur les PWA ou encore appelées Progressive Web App. Que font-elles ? A quoi servent-elles ? Quels sont les avantages par rapport à une application mobile ? Que donnent les PWA appliquées au domaine du e-commerce ? Nous allons tenter de répondre à l’ensemble de ces questions.
Qu’est ce qu’une PWA ?
Premièrement, et avant d’attaquer le sujet de la définition d’une PWA, nous allons parcourir les possibilités offertes aujourd’hui quant à la conception d’une solution mobile :
Nous avons sur le graphique ci-dessus deux pans :
- Les sites web
- « Mobile First »
- Dont la conception démarre d’un périphérique mobile (smartphone ou tablette) avant de s’étendre vers les écrans d’ordinateur
- Nous avons donc un site entièrement adapté aux mobiles pour autant n’offrant pas toutes les fonctionnalités d’une application
- Dont la conception démarre d’un périphérique mobile (smartphone ou tablette) avant de s’étendre vers les écrans d’ordinateur
- Sites mobiles
- Développement secondaire au « site web » qui permet d’avoir un site entièrement pensé pour les périphériques mobiles et uniquement pour ces derniers. Avec un contenu sélectionné et des fonctionnalités spécifiques, des pages qui lui sont propres, une consultation plus fluide grâce à des éléments graphiques dédiés à ce dernier.
- Bien souvent, l’accès de ces derniers passe par une redirection. Une popup invitant l’utilisateur à passer sur le site mobile.
- Développement secondaire au « site web » qui permet d’avoir un site entièrement pensé pour les périphériques mobiles et uniquement pour ces derniers. Avec un contenu sélectionné et des fonctionnalités spécifiques, des pages qui lui sont propres, une consultation plus fluide grâce à des éléments graphiques dédiés à ce dernier.
- Sites responsives
- A l’inverse d’un site Mobile First, nous partons de la conception pour écran « desktop » pour ensuite venir décliner ce dernier vers les appareils mobiles.
- Les sites responsives sont moins onéreux, moins chronophages que les sites mobiles first mais n’offrent pas une expérience utilisateur similaire à ces derniers (temps de chargement, interface moins intuitive, etc…).
- A l’inverse d’un site Mobile First, nous partons de la conception pour écran « desktop » pour ensuite venir décliner ce dernier vers les appareils mobiles.
- « Mobile First »
- Les applications mobiles
- Applications mobiles natives
- L’application mobile native va nécessiter un développement par plateforme (iOS / Android), cette dernière pourra être téléchargée via les stores propres à chacun des systèmes d’exploitation (App Store / Play Store). Ces dernières permettent d’utiliser pleinement profit des fonctionnalités des appareils mobiles mais également d’utiliser des éléments graphiques propres à chacun des systèmes d’exploitation. L’application mobile native sera donc plus contraignante en terme de développement qu’une application hybride mais plus adaptée aux plateformes iOS et Android.
- Applications « Cross-Platform »
- Contrairement à l’application mobile native, la technologie « Cross-Platform » permet de ne créer qu’un seul projet pour ensuite obtenir une application compatible avec Android et iOS. Le développement de ces dernières s’effectue :
- soit via un framework qui va convertir le projet en deux codes natifs (Android et iOS), on parle ici « d’application native générée »
- soit via framework basé sur un langage web qui sera enrichi des couches applicatives permettant l’utilisation des fonctionnalités natives (Géolocalisation, appareil photo, notification push, etc…)
- Contrairement à l’application mobile native, la technologie « Cross-Platform » permet de ne créer qu’un seul projet pour ensuite obtenir une application compatible avec Android et iOS. Le développement de ces dernières s’effectue :
- Applications mobiles natives
Mais où se situe la PWA dans tout ça ?
Et bien la Progressive Web App est un croisement de l’ensemble des possibilités énoncées ci-dessus. Nous nous retrouvons avec le meilleur du Web comme le propose l’application hybride mais également avec du natif grâce à une surcouche applicative fournissant les fonctionnalités les plus intéressantes de l’application mobile native. L’obtention d’une PWA se fait via un navigateur à l’instar applications mobiles qui s’acquièrent via les deux stores Android et iOS.
Que font-elles ?
Comme expliqué, les PWA sont des applications utilisant des technologies WEB (Souvent HTML et JavaScript) tout en tirant le meilleur parti des applications mobiles classiques. L’idée est d’offrir une expérience enrichie pour l’utilisateur de cette dernière. Les Progressive Web App permettent d’obtenir un site accessible via mobile mais également de pouvoir l’épingler sur l’écran d’accueil du téléphone et donc d’avoir une icone dédiée comme le ferait une application téléchargée depuis les stores. Comme énoncé précédemment, les fonctionnalités d’une application mobile classique sont disponibles. Nous pouvons donc utiliser le système de Notification Push, la géolocalisation mais également l’appareil photo pour scanner une carte bancaire par exemple. Un point noir est à soulever concernant les appareils sous iOS, les notifications push ne sont pour l’instant pas encore implémentées. Nous espérons une future mise à jour de la part d’Apple pour améliorer cela.
Quels sont les avantages par rapport à une application mobile ?
Une application mobile, pour être utilisée doit être téléchargée. Cependant nous le savons bien, beaucoup d’applications ne fournissent pas un besoin d’usage régulier… Cela est donc contraignant de devoir télécharger une application mobile pour un usage unique et par conséquent le public visé par cette dernière est restreint. L’un des plus gros avantages donc de la PWA VS les applications natives est de ne pas se contenter à une portion des utilisateurs mobiles. L’ensemble du trafic web peut profiter de cette expérience utilisateur accrue et selon ses souhaits de venir l’épingler comme une application classique.
La PWA étant accessible depuis un navigateur et non via un store, vous n’aurez pas à vous affranchir des règles imposées par chacun d’eux mais également de vous acquitter du paiement de la licence.
Que donnent-les PWA appliquées au domaine du e-commerce ?
Les achats sur les sites e-commerce via appareils mobiles sont en croissance perpétuelle et cela depuis plusieurs années maintenant… Pour atteindre en 2017 un chiffre d’affaires de 16.8 milliards d’€ soit 21% du CA global en France (Ordinateur + terminaux mobiles). D’après les chiffres 1 vente sur 5 a lieu sur mobile, cependant le nombre de visites provenant des mobiles est d’en moyenne 65% des visites globales. Il reste donc des parts de marché à gagner sur les visites mobiles non converties !
Après constatation des chiffres, une question se pose : comment conquérir et proposer à un maximum de personnes naviguant sur mobile une solution optimale ?
Chez PrestApp, nous tentons d’y apporter un début de réponse avec l’aide de PrestaShop en proposant une solution moins « restrictive » : la PWA. Moins restrictive car accessible par l’ensemble des acheteurs en ligne et non pas uniquement par ceux ayant téléchargé l’application d’une boutique précise !
Nous avons fait le maximum et tout y est :
La PWA est bien évidemment éditable en temps réel depuis notre interface d’administration et surtout connectée en temps réel sur la boutique PrestaShop. L’ensemble des données sont également récupérées en temps réel : les produits, les stocks, les images, les descriptions, le menu, les couleurs internes à l’application, etc… Et nos widgets de la page d’accueil ainsi que les pages personnalisées sont toujours disponibles !
Nous vous en annoncerons plus dans les prochains jours ! Stay tuned 😉
Sources :
- Fevad
- Mobizel