PWA : le futur du web mobile !

Par Maxime et Cédric, Développeurs Web à l’Agence Dn’D

Considérées comme une révolution pour le web mobile, les PWA représentent un parfait compromis entre les applications natives et le web traditionnel. Souvent désigné comme le “futur du web mobile”, ce concept a même su séduire quelques médias qui se sont prêtés à l’exercice, à l’instar du journal sportif L’Équipe, pionnier en la matière. Vous vous demandez sûrement en quoi il serait plus intéressant de choisir une application web imitant les applications natives plutôt qu’une application native elle-même, et vous avez bien raison !

Dn’D vous livre les atouts des PWA, leurs caractéristiques, les domaines dans lesquels elles excellent, tant pour les entreprises que pour les développeurs.

PWA : concept et définition

Une PWA ou Progressive Web App est un site internet ayant intégré des fonctionnalités jusqu’alors réservées aux applications. Si les PWA ne sont pas un concept nouveau en soi, aujourd’hui grâce aux dernières technologies et aux avancées de nos navigateurs, elles deviennent de plus en plus intéressantes et qualitatives.

Le principe fondamental d’une PWA repose sur la segmentation et l’association des briques d’une application au travers d’API. Cette conception particulière permet de prendre le meilleur de chaque technologie utilisée dans l’architecture métier afin d’obtenir un parfait compromis entre une application native/mobile et un site web.

Popularisé par Google en 2015, cette façon de construire et d’imaginer les sites web de demain est maintenant un sujet incontournable, au coeur des enjeux de l’Internet du futur, surtout dans le domaine du E-Commerce !

Sites web et applications mobile : quelles différences ?

Avant de connaître le réel intérêt d’une PWA, il faut distinguer quelles différences il existe entre un site web et une application mobile.

► On parle de site web lorsque l’on accède à un ensemble de pages hiérarchisées présentes sur un serveur depuis un navigateur. On peut donc retrouver dans cette catégorie l’ensemble des sites indexés sur Google, y compris les sites responsives qui prennent le relais lors d’une navigation sur mobile. En dehors des PWA, les WebApps sont les sites ayant le plus de similitudes avec les applications mobiles natives, car elles sont en réalité des sites internet développés pour les mobiles (Exemple : Google Agenda, Google Drive…).

► On parle d’applications natives (ou hybrides) lorsqu’elles sont disponibles sur une plateforme de téléchargement (App Store, Play Store..). Ces applications sont soit des logiciels développés pour des systèmes d’exploitation spécifiques (app natives), soit un site web dit “hybride” qui peut s’adapter à tous les systèmes d’exploitation.

Il faut comprendre ici qu’une PWA se trouve exactement entre ces deux notions et peut donc profiter des fonctionnalités d’une application mobile native, tout en étant consultable depuis un navigateur .

Les PWA présentent de nombreux avantages…

• Les PWA proposent une expérience rapide et efficace avec un temps de chargement des pages grandement réduit.
• Une PWA peut envoyer des notifications push en temps réel pour engager les utilisateurs, même quand ils ne sont pas sur l’appli.
• Même hors connexion, les PWA sont facilement accessibles.
• Les PWA sont sécurisées par le protocole HTTPS, garantissant une utilisation pour tout type de site et de données.
• Les PWA ne nécessitent pas de longues mises à jour obligatoires : l’app s’actualise automatiquement lors de son chargement.
• En enregistrant la PWA dans vos favoris, une icône apparaîtra sur votre écran d’accueil, comme pour les applications natives. Cela réduit le chemin d’accessibilité de l’utilisateur vers l’application (à chaque étape d’accès à l’application, 20% des utilisateurs potentiels renoncent à y accéder).

La PWA permet de réduire drastiquement le chemin d’accessibilité de l’utilisateur vers une application mobile (source : fidelisa)

• Les PWA permettent de se passer complètement des web stores et de déployer une application sur un simple serveur web.
• Le temps de développement d’une PWA est moins élevé que celui d’une application native.
• La PWA n’est développée qu’une seule fois alors qu’une application native requiert deux développements distincts, l’un pour iOS, l’autre pour Android. De plus, il est important de préciser qu’il y a une mutualisation de la maintenance sur la PWA.
• Puisque l’on accède à la PWA depuis un navigateur web, on n’a pas à soumettre son application sur les Stores.

Différence entre la vitesse d’affichage de l’application du Washington Post sur mobile & sur ordinateur (source : www.washingtonpost.com)

… Et très peu d’inconvénients !

• Les PWA ne sont pas disponibles sur la recherche des app stores.
• Consommation élevée de batterie.
• Les PWA n’ont pas accès à toutes les fonctionnalités du téléphone : il est notamment impossible d’utiliser le Bluetooth, nécessaire pour la géolocalisation intérieure. Cependant, la PWA permet d’envoyer des notifications push, tout comme l’application native.
• Toutes les PWA ne sont pas compatibles avec iOs ou Safari. Ces applications ne respectent généralement pas le test de qualité auquel sont soumises l’ensemble des applications publiées sur l’AppStore. Elle fonctionnent donc de façon restreinte sans certaines fonctionnalités maîtresse du concept de PWA comme les notifications push, l’accès aux capteurs et composants du téléphone (altimètre, ID visage, bluetooth..) ou encore l’accès à In App Payments et à beaucoup d’autres services basés sur Apple.
• Pour proposer une PWA à ses visiteurs, il faut disposer d’une connexion internet dans l’ensemble de ses espaces d’exposition
• Impossible de monétiser son application avec une PWA.

Les PWA et le SEO

L’intérêt du SEO dans le web d’aujourd’hui n’est plus à prouver. Tous les sites internet, quels qu’ils soient, ont besoin d’une campagne de référencement leur permettant de bénéficier d’une bonne visibilité au sein des moteurs de recherche afin d’augmenter leur nombre de visiteurs et ainsi, dans le cas de plateformes E-Commerce, d’optimiser leurs ventes. Au vue de la communication API entre ses différents composants, la pensée collective serait qu’il est plus compliqué (voire impossible) d’optimiser le référencement naturel d’une PWA plutôt que d’une SPA (Single Page Application).
Pourtant, l’optimisation SEO d’une PWA n’est finalement pas si différente d’un site web classique. Google encourage grandement l’utilisation des PWA en propulsant ces applications au top de son moteur de recherche, mais cela n’est tout de même pas automatique. Pour se faire, il faut respecter l’ensemble des bonnes pratiques de référencement d’une PWA de Google, afin que votre application se retrouve en première page des recherches google. Parmi ces recommandations, on retrouve l’utilisation d’URL dites “propres” en évitant les identificateurs de fragment qui servent à pointer sur une ressource secondaire.

La déclaration des URL dites “canoniques” (URL différentes qui reprennent le même contenu) est une balise permettant d’indiquer à un moteur de recherche lorsque plusieurs contenus ont des URL différentes mais disposant de contenus identiques, avec un rel = « canonical ». Cette balise définit l’URL “principale” à prendre en compte pour l’indexation.

En utilisant une PWA, vos pages deviendront moins volumineuses et vous gagnerez en vitesse de chargement. Cet avantage décisif vous permettra de satisfaire plus d’utilisateurs et donc de bénéficier d’un trafic plus important. En effet, pour Google, un temps de chargement rapide joue un rôle prépondérant pour améliorer son référencement.

De plus, il est primordial de souligner que l’expérience utilisateur a un impact important dans le référencement de votre site. Les PWA permettent la consultation de pages web même sans connexion et cela contribue à rendre l’expérience des internautes encore plus agréable. Ici, les notifications push jouent un rôle primordial puisque les PWA participent pour inciter les visiteurs à revenir une fois qu’ils ont quitté votre site et à leur faire parvenir des offres exclusives.

Pour résumer, PWA et SEO sont loin d’être incompatibles. Cependant, un bon référencement dépend tout de même de la société et des actions qu’elle met en place pour que les robots google puissent analyser et référencer l’application correctement.

Cas d’utilisations des PWA

Côté Marketing

 
Les Progressive Web Apps sont idéalement utilisées dans le cadre de projets de Marketing Automation et pour optimiser les ventes dans le secteur du E-Commerce.
Certaines marques ayant adopté les PWA enregistrent plus de conversions sur iOS par rapport à un site non-PWA. D’ailleurs, Google a publié des études de cas de sociétés qui ont adopté les PWA et les résultats sont très positifs :

• Le journal L’Équipe a vu son taux de rebond divisé par 2 chez les 10 % d’utilisateurs qui se sont vus proposer de tester l’application.
• La chaîne de télévision américaine The Weather Channel constate une baisse du temps de chargement de son site de 80% à partir de sa PWA, et près d’un million d’utilisateurs ont activé la réception de notifications push.
• Twitter, avec sa version Twitter Lite qui pèse moins de 1 Mo, se charge 30 % plus rapidement que la version native et consomme 70 % de data en moins permettant aux pays en voie de développement et les connexions à bas débit d’utiliser pleinement ses services.

Côté E-Commerce

 
Les retailers affichent de nets progrès depuis qu’ils adoptent les PWA :

• L’application E-Commerce B2C 5miles a fait baisser son taux de rebond de 50 % et a augmenté ses conversions de 30 %.
• Lancôme a enregistré une augmentation globale de ses conversions de 17 %, une hausse de 53 % des sessions mobiles iOS et une baisse du taux de rebond sur iOS de 10 %.
• Alibaba.com , leader de l’E-commerce en Chine, enregistre une augmentation des conversions de 76% et un taux d’interaction 4 fois supérieur après conversion de son site mobile en PWA.

 
Concernant les différents exemples d’utilisation des PWA, on peut aussi citer la société indienne Flipkart qui utilise une PWA pour optimiser sa plateforme populaire de E-commerce Flipkart Lite ou encore Air Berlin, qui utilisait une PWA pour son processus d’enregistrement en ligne, permettant aux utilisateurs d’accéder à leurs billets sans connexion Internet.

Ainsi, les champs d’action des PWA sont larges et offrent une pluralité d’avantages dans des domaines variés !

Différentes solutions de PWA, telles que Vue Storefront, existent aujourd’hui et sont à découvrir dans notre benchmark PWA.

Vous êtes intéressé par la PWA ?

Contactez-nous !