L’utilisation des appareils mobiles au cours de la dernière décennie a considérablement augmenté, et la tendance est sur le point de se poursuivre dans le futur.
En toute logique, le commerce électronique s’est focalisé sur le mobile, et cette orientation va s’inscrire dans la durée, comme le montrent les statistiques suivantes :
- Les utilisateurs d’appareils mobiles ont dépassé en nombre les utilisateurs d’ordinateurs de bureau au niveau mondial pour la première fois en 2014
- D’ici 2025, les ventes au détail du commerce mobile devraient atteindre 728 milliards de dollars et représenter 44 % des ventes au détail du commerce électronique aux États-Unis
- 80 % des acheteurs ont utilisé un téléphone mobile à l’intérieur d’un magasin physique pour consulter des avis sur des produits, comparer les prix ou trouver d’autres emplacements de magasins
Cela signifie qu’il est grand temps de sauter dans le train du commerce mobile, quel que soit le secteur d’activité de votre entreprise, mais encore plus si vous évoluez dans le domaine de l’e-commerce.
Les Applications Web Progressives (PWA), une technologie incroyablement prometteuse, ont émergé pour changer de manière irréversible la façon dont les gens interagissent avec les sites web.
Même si cette technologie web existe depuis un certain temps maintenant, force est de constater que la popularité de la PWA a explosé au cours des deux dernières années.
Comme nous allons le voir dans la suite de cet article, la PWA combine le meilleur du site web avec le meilleur de ce que les applications natives ont à offrir, créant une expérience utilisateur mobile de haut niveau. Ce sont des applications web spéciales auxquelles on accède comme sur des sites web normaux, mais qui offrent énormément d’avantages qu’on ne trouve pas sur les applications natives.
En choisissant la technologie Progressive Web App pour votre prochain projet web, vous optez pour une solution qui va changer la façon dont vous faites du commerce en ligne.
I – La PWA, c’est quoi ?
Pour définir une PWA (Progressive Web App) d’une manière simple, on peut dire que c’est un site web qui possède tous les avantages d’une application mobile. Une PWA est capable de vous offrir une version plus rapide, plus fiable et plus attrayante de votre site internet ou de votre boutique en ligne.
Les PWA peuvent faire la plupart des choses que les applications natives — dont nous allons reparler bientôt — peuvent faire, comme fonctionner hors ligne, accéder à votre caméra et à votre microphone, au GPS, etc.
Mais il existe une différence fondamentale entre une PWA et une application native : la première ne se télécharge pas sur un système d’exploitation.
Elle fonctionne en effet comme un site internet classique.
Les PWA sont écrites en JavaScript, CSS et HTML. Elles ressemblent à des pages Web ordinaires, ce qui signifie qu’elles peuvent être recherchées dans les navigateurs internet.
Cependant, elles offrent également des fonctionnalités et des performances identiques à celles fournies par les applications mobiles : elles sont rapides, peuvent fonctionner hors ligne, envoyer des notifications push et utiliser certaines fonctionnalités des appareils mobiles des utilisateurs.
De plus, les PWA peuvent être téléchargées sur les marketplaces d’applications les plus populaires comme AppStore et Google Play.
Le plus grand moteur de recherche au monde, Google, est la société qui a créé la PWA en 2018, et voici en quels termes elle évoque cette technologie web dont le concept a été pour la première fois mis en lumière par Steve Job dès 2007, et développé ensuite par Alex Russel, ingénieur spécialisé dans le développement web chez Google :
Selon Google, la PWA est :
- Fiable : elle se charge instantanément même dans des conditions de réseau incertaines
- Rapide : elle répond rapidement aux interactions de l’utilisateur avec des animations fluides et sans défilement irrégulier
- Engageante : son interface utilisateur apparait comme naturelle sur les appareils mobiles, et elle procure une expérience utilisateur immersive.
Pour résumer, les Progressive Web Applications possèdent les principaux avantages des applications mobiles natives, comme la rapidité, la légèreté, la fluidité, etc., mais pas les inconvénients liés aux différents systèmes d’exploitation.
Au fait, quelles sont les principales différences entre les Progressive Web Apps et les Native Mobile Apps ?
Les applications mobiles natives sont les plus téléchargées aujourd’hui sur les applications stores.
L’application mobile native se définit par son code natif qui lui permet d’être développée et d’être exécutable pour un système d’exploitation unique. Ainsi, une application native va être développée en fonction du système d’exploitation choisi.
Cela implique que son code source sera différent selon que l’application est destinée à être utilisée sur un iPhone ou sur un appareil mobile Samsung.
Si vous souhaitez créer une application mobile disponible et utilisable à la fois pour Android et IOS, il faut donc développer en principe deux versions avec des technologies différentes.
Les applications mobiles natives développées pour Apple utilisent le langage de programmation Swift (anciennement Objective-C). Par contre, les développeurs utilisent les langages Kotlin ou Java pour une application Android.
Une fois codée, l’application mobile native est installée localement sur votre smartphone ou votre tablette et peut ainsi utiliser diverses fonctionnalités de l’appareil, comme l’appareil photo, la vidéo, le Bluetooth, etc.
Voyons maintenant les caractéristiques technologiques des Progressive Web Apps.
II – La technologie PWA
Nous avons mentionné que les PWA fonctionnent différemment des sites Web et des applications natives.
C’est le moment d’examiner de plus près certaines des technologies qui caractérisent les PWA, afin de mieux comprendre leur potentiel.
Des sites web à page unique
Une application à page unique (SPA/Single Page Application) interagit avec l’utilisateur en réécrivant dynamiquement la page plutôt qu’en chargeant une nouvelle page entière à partir du serveur.
En d’autres termes, le navigateur web n’envoie pas de demande pour charger complètement la page lorsque l’utilisateur clique sur un lien. Au lieu de ça, les SPA utilisent le langage JavaScript pour manipuler la page actuelle et donner l’impression que l’utilisateur a réellement changé de page.
Cette fonctionnalité est essentielle pour les Progressive Web Apps, car la plupart sont des SPA. Elles assurent un chargement de contenu instantané et apportent une sensation « app-like » aux utilisateurs.
Le « Web App Manifest »
Le « Web App Manifest », ou Manifeste de l’Application Web, est un fichier de type JSON qui indique au navigateur comment votre application web doit se comporter lorsqu’elle est installée sur l’appareil mobile d’un utilisateur.
Bien que le fichier ne contienne que les informations générales sur votre application, il joue un rôle important en donnant à votre application web l’apparence d’une application native.
Un fichier manifeste typique comprend des informations sur le nom de l’application, les icônes qu’il doit utiliser, le start_url qu’il doit prendre en compte lorsque l’application est lancée, etc.
Le but du manifeste est d’installer des applications sur l’écran d’accueil d’un appareil, offrant aux utilisateurs un accès plus rapide et une expérience utilisateur plus riche.
Les Service Workers
Le chargement instantané des pages, l’expérience utilisateur de type application mobile, l’augmentation des conversions mobiles, la navigation hors ligne et les notifications push ne sont que quelques exemples de la puissance des PWA.
Tout cela est dû en partie à un Proxy programmable appelé « Service Workers ».
Dans le fonctionnement d’un site web classique, la base de code est stockée sur un serveur, et n’importe qui peut y accéder via son navigateur en saisissant le nom de domaine ou l’adresse IP.
Mais les Progressive Web App ont quelque chose en plus : le service worker. Il s’agit d’un fichier JavaScript côté client qui est ajouté à votre base de code. Il réside entre le serveur et le navigateur, et a pour mission de remplir des tâches et des fonctionnalités d’arrière-plan typiques des fonctionnalités de type application mobile, par exemple, une notification push qui vous annonce que le produit que vous avez commandé est en route pour la livraison.
La compatibilité avec les navigateurs
La prise en charge par les navigateurs modernes de fonctionnalités telles que les notifications push et la sauvegarde de l’écran d’accueil fait partie intégrante des Progressive Web Apps.
Cette technologie web implique également que les navigateurs prennent en charge les service workers, ce que font presque tous les navigateurs modernes, comme Google Chrome, Safari ou Mozilla Firefox.
Mais en réalité, le manque de prise en charge de certaines fonctionnalités spécifiques n’entrave pas le bon fonctionnement d’une PWA.
Comme les PWA sont par nature des sites web, ils fonctionneront toujours dans tous les navigateurs, bien que, parfois, ils puissent être dépourvus de certaines fonctionnalités.
Certains navigateurs, comme Google Chrome, font tout pour favoriser une bonne utilisation des PWA, et ce n’est pas étonnant, vu que le moteur de recherche américain est à l’origine de cette technologie.
Si votre site Web répond aux critères d’installation de la Progressive Web App, Google Chrome affichera un bouton d’installation dans la barre d’adresse, la fameuse Omnibox, pour indiquer que votre Progressive Web App peut être installée.
Si vous cliquez sur le bouton, une boîte de dialogue d’installation apparaîtra, ce qui facilitera l’installation de la PWA.
III – Les caractéristiques et avantages de la PWA
L’essor de la technologie PWA a bouleversé dans la façon dont nous interagissons avec le web, en apportant un ensemble de fonctionnalités, qui chacune contribue à l’amélioration de l’expérience utilisateur globale.
La liste complète des fonctionnalités comprises dans les PWA serait trop longue à établir, alors nous avons sélectionné les principales :
Une compatibilité unique pour toutes les plateformes
Chaque type de plateforme web présente des avantages et des inconvénients.
Les applications compatibles avec tous types de plateformes constituent une alternative efficace à la création et à la maintenance d’applications natives distinctes pour le Web, iOS et Android.
Avec la technologie PWA, vous pouvez offrir la même expérience utilisateur à tout le monde, quelle que soit la plateforme utilisée pour interagir avec votre application.
Un temps de chargement instantané
Un site web qui met plus de 2 ou 3 secondes à se charger, c’est synonyme d’un taux de rebond élevé pour votre business en ligne, c’est-à-dire que la majorité des utilisateurs vont quitter votre site internet avant même d’avoir vu la page d’accueil.
La technologie PWA utilise une méthode appelée CSR (Client-Side Rendering) qui signifie « Rendu côté client », dont le but consiste à transférer le contenu dans le navigateur du client, à l’aide de JavaScript.
Au lieu d’envoyer à chaque fois un document HTML entier à partir du serveur, l’utilisateur ne reçoit qu’une petite chaîne de données avec un fichier JavaScript qui va demander et restituer les parties nécessaires de la page dans le navigateur du client, ce qui entraînera une amélioration importante de la vitesse de chargement des pages Web.
L’expérience utilisateur est beaucoup plus avantageuse qu’avec le server-side rendering, car tous les scripts et les contenus n’ont pas besoin d’être chargés entièrement à chaque appel d’une nouvelle page par l’utilisateur.
Possibilité de naviguer hors ligne
Le « mode hors ligne » n’est pas une expérience fournie uniquement par les applications natives.
Dans la technologie PWA, la gestion standard de la mise en cache du navigateur web peut être remplacée par des règles personnalisées, et le stockage du cache est indépendant du serveur distant.
Si votre connexion internet disparait, la navigation reste possible, et vous avez toujours la possibilité de parcourir la page web que vous étiez en train de lire.
Et si vous appuyez sur « Retour », vous allez obtenir une page web mise en cache avec les données précédemment récupérées, qui sera affichée sur l’écran de votre smartphone, en lieu et place d’un message d’erreur 404.
Votre application mobile disponible dans les App Store
Tous les e-entrepreneurs souhaitent voir leur application mobile répertoriée dans les App Stores les plus populaires, qu’il s’agisse de Google Play, d’Amazon App Store, de Galaxy Store ou de l’Apple Store.
C’est l’une des raisons pour lesquelles de nombreuses entreprises investissent dans le développement d’applications natives relativement coûteuses pour iOS et Android.
Mais la technologie PWA peut également vous permettre d’être présent dans les App Stores, et ce, pour un coût beaucoup moins élevé.
Grâce à des technologies telles que « Trusted Web Activity », qui intègrent un onglet web dans une application mobile, vous pouvez convertir n’importe quelle application web progressive en une application native en quelques heures.
Il est alors possible de le déployer à la fois sur l’App Store d’Apple et sur le Google Play Store sans avoir à développer une application mobile native à partir de zéro.
Les notifications push
Pour garder vos utilisateurs actuels engagés et réengager ceux qui ont visité votre e-commerce, mais ont par exemple abandonné leur panier avant de passer à la caisse, la technologie PWA vous offre la possibilité d’envoyer des notifications push.
Cette fonctionnalité peut donner à vos clients potentiels une motivation supplémentaire pour ouvrir l’application et l’utiliser. Les experts du marketing digital mobile considèrent que les notifications push incitent les utilisateurs à passer plus de temps sur votre application et concourent à booster vos taux de conversion.
Des applications web poids plume
Les applications Web progressives sont conçues pour offrir la meilleure expérience utilisateur possible pour les utilisateurs d’appareils mobiles.
Malgré le nombre de fonctionnalités étonnantes qu’elles proposent, les applications Web progressives sont extrêmement légères et peuvent fonctionner de manière transparente, même sur des réseaux à faible bande passante.
Par exemple, l’application Pinterest pour iOS pèse 56 MB, tandis que sa version PWA ne requiert que 150 KB.
L’enregistrement de l’écran d’accueil
Les applications Web progressives présentent un avantage majeur par rapport aux autres types d’applications mobiles ou aux sites Web : elles permettent aux clients potentiels d’ajouter votre PWA à leur écran d’accueil directement depuis le navigateur. Cela les rend beaucoup plus rapides à déployer.
La technologie PWA permet en effet d’ignorer à la fois la mise en signet de votre page Web et l’itinérance dans les App Stores pour trouver et télécharger votre application.
Cela procure aux utilisateurs l’équivalent d’une expérience d’application native complète, mais sans les soucis générés par le processus de codage et de révision.
Étant donné que les PWA ressemblent à des applications natives, vos acheteurs n’auront même pas besoin d’un navigateur une fois l’application web ajoutée et affichée sur leur écran d’accueil. Une fois lancé, votre PWA s’ouvrira en plein écran et fonctionnera indépendamment.
Indexation
À l’instar de n’importe quel site web, les applications web progressives possèdent une URL et peuvent être explorées et indexées par les moteurs de recherche, contrairement aux applications natives.
Les utilisateurs peuvent donc trouver facilement des pages PWA directement dans les pages de résultat des moteurs de recherche.
Pas de problème de mise à jour
Les mises à jour sont parfois problématiques pour les utilisateurs et représentent une grosse responsabilité pour les développeurs web.
Or, il se trouve que PWA n’ont pas besoin d’être mise à jour. Elles se mettent automatiquement et en temps réel, comme n’importe quel un site web.
IV – L’impact de la technologie PWA sur l’e-business
Pour finir cet article consacré à la PWA, et pour vous convaincre que c’est la bonne technologie pour la création de votre prochain projet d’application web, observons son impact sur trois aspects essentiels du e-business actuel : les performances, l’accessibilité et l’expérience utilisateur.
Les performances
La première impression que les internautes ressentent à propos de votre site internet ne concerne ni sa conception ni son contenu.
Tout est dans le temps de chargement de votre page d’accueil, sujet évoqué plus haut dans cet article.
Le meilleur parcours utilisateur au monde ne vaut pas grand-chose si les internautes ferment votre page d’accueil, car celle-ci met trop de temps à se charger.
Dans le domaine du mobile, plus de 50 % des visiteurs abandonnent une page qui met plus de 3 secondes à se charger.
La technologie PWA permet de réduire grandement le volume des données. Pour les sites internet déjà optimisés pour la vitesse de chargement, cela peut conduire à des temps de chargement quasi instantanés, similaires à celui des applications natives.
Même sans intégrer des pages de type AMP (Accelerated Mobile Page), la PWA facilite le chargement de votre première page web en servant un document léger comprenant des ressources intégrées.
L’accessibilité
Le temps de chargement rapide fourni par la PWA représente du pain béni en termes d’accessibilité pour les entreprises qui opèrent sur des marchés émergents ou qui ont besoin de fournir aux utilisateurs un accès cohérent à leur site internet à n’importe quel moment et à partir de n’importe quel endroit.
Par exemple, l’expansion rapide d’Uber sur de nouveaux marchés exigeait une application de covoiturage rapide et pouvant être utilisé sur tous types de plateforme, quel que soit l’emplacement de l’utilisateur.
Par conséquent, ils ont opté pour la technologie PWA.
L’expérience utilisateur
Les applications natives ont dépassé les sites web mobiles depuis belle lurette en termes d’engagement avec les utilisateurs.
Mais les Progressive Web Apps sont en train de combler cet écart avec les natives apps, grâce à des fonctionnalités qui étaient auparavant réservées à ces dernières, comme l’absence de rechargement lors du passage d’une page à l’autre.
Les PWA sont même plus performantes que les applications natives dans certains cas, et présentent par exemple moins de frictions lors de l’installation de votre application.
Conclusion
Devez-vous choisir un développement PWA pour la réalisation de votre prochain projet d’application web ?
Au vu de tous les éléments que nous avons évoqués tout au long de cet article, la réponse paraît claire.
La PWA est tout simplement plus puissante, plus flexible et plus performante qu’un site web mobile ordinaire.
La PWA vous offre à la fois un site web de commerce électronique, une boutique mobile et une application mobile dans un emballage unique, et de plus, c’est une solution de développement web abordable.
Toutes les plus grandes entreprises ont adopté la PWA, comme Amazon, Alibaba ou encore Uber.
Ce qui était autrefois une technologie principalement exploitée par les géants du digital, en raison des coûts de développement, devient de plus en plus accessible, pour le plus grand bonheur des e-entrepreneurs de toute taille.
Laissez vos commentaires