Le blog d'Inéolab
Inéolab met à votre disposition son expertise sur des thématiques diverses.

Qu’est-ce qu’une progressive web app ou PWA ?

progressive web app
Qu’est-ce qu’une PWA ?

Une expérience utilisateur inégalée : voilà ce que promet la Progressive web app, une technologie qui mixe les meilleures fonctionnalités des sites web et des applications mobiles. À l’heure où Internet se consulte d’abord depuis les smartphones et les tablettes, comment fonctionnent les PWA et quels avantages en tirer ?

Internet, les mobiles et nous

L’internet sera mobile ou ne sera pas ? Les chiffres semblent effectivement le démontrer. C’est en 2016 que la courbe des utilisateurs d’internet sur appareil mobile a rejoint celle des internautes préférant l’ordinateur, avant de la dépasser. Moins d’un an plus tard, Android devenait le système d’exploitation le plus utilisé, devant Windows. La France n’échappe pas au phénomène puisque les recherches sur Google sont plus nombreuses via les smartphones et les tablettes que sur les ordinateurs.

Ces données étant posées, passons au quotidien des utilisateurs…

Pour eux, accéder à internet sur un appareil mobile, c’est soit ouvrir un site web via un navigateur, soit télécharger une application sur sa tablette ou son smartphone. Dans le premier cas, et à condition que le site en question ait été conçu en responsive design, il y a de fortes chances qu’il mette du temps à se charger. Or une page qui met plus de 3 secondes à apparaître sur un écran est abandonnée par plus de la moitié des internautes. Autres problèmes propres aux sites web, l’impossibilité d’avoir un affichage hors connexion et la nécessité de faire une recherche ou de saisir une URL lorsque l’on veut y accéder.

Les applis sont-elles mieux loties ? Pas forcément. Entre le moment où elle est trouvée dans la jungle des stores et celui où elle est effectivement ouverte, une application perd en moyenne 20% de ses utilisateurs et autant de clients potentiels.

Autre chiffre qui mérite notre attention : les Français se servent en réalité très peu des applications qu’ils téléchargent : ils en ouvrent régulièrement, en moyenne 6 sur 26 applis téléchargées.

Google dans la danse

De son côté, l’incontournable Google est passé au « mobile-first indexing ». En clair, le géant des moteurs de recherche donne désormais la priorité aux versions mobiles des sites internet pour décider de leur positionnement dans les pages de résultat. Il fallait s’y attendre, au vu des chiffres précédemment cités et du développement de l’internet mobile, mais aussi du lancement par Google, dès 2016, d’une technologie destinée à accélérer le chargement des pages web sur les mobiles, baptisée AMP (Accelerated Mobile Pages). Mais si, effectivement, l’amélioration des performances web permet une diminution du taux d’abandon, l’adoption de l’AMP ne règle pas tous les problèmes.

C’est ici qu’entrent en jeu les Progressive web apps, une autre technologie signée Google.

Des raisons d’adopter la Progressive web app

Pour une entreprise, la technologie Progressive web apps offre deux avantages principaux : elle lui apporte une présence sur mobile qui sera repérée et référencée par Google ; et elle offre à ses prospects une expérience utilisateur inédite, ce qui, tout au moins pour les sites marchands, a pour effet d’augmenter le taux de conversion.

Pour faire simple, les PWA combinent les meilleures fonctionnalités des pages web et des applis. Pour les propriétaires d’appareils mobiles, elles ne se téléchargent pas : nul besoin d’aller fouiner dans l’AppStore ou le Play Store pour les trouver. En revanche, elles vont visuellement apparaître sur l’écran avec une icône ressemblant à celle d’une appli : inutile de rentrer l’URL à chaque fois que l’on souhaite se connecter.

Les PWA côté utilisateur…

Une fois sur une Progressive Web App, l’internaute se voit proposer – par vous – une expérience utilisateur inégalée : les pages se chargent (très) rapidement, ne prennent pas d’espace sur la mémoire de l’appareil, fonctionnent avec tous les systèmes d’exploitation et peuvent être consultées hors connexion. Comme il le fait avec des applications natives, le visiteur peut par ailleurs profiter d’un affichage plein écran, effectuer des rotations, etc. Quant aux mises à jour, elles s’effectuent en temps réel et en arrière-plan, sans aucune intervention de l’utilisateur.

Si vous choisissez la technologie PWA pour votre site web, vous allez vous-même pouvoir améliorer cette expérience, par exemple, en adaptant les contenus à des localisations géographiques.

…et côté propriétaire de site

Initialement accessibles depuis un navigateur, les PWA possèdent une URL sécurisée par le protocole HTTPS, ce qui a toute son importance dans le e-commerce. L’existence de l’URL implique en outre une indexation par les moteurs de recherche, et donc la possibilité, pour les propriétaires, d’améliorer leur référencement naturel.

Ce n’est pas tout. Les Progressive web apps permettent l’utilisation de notifications Push. Une information sur les nouveautés ou les promos s’affiche automatiquement sur l’écran des utilisateurs, même si ceux-ci ne sont plus sur le navigateur. Un bon moyen de les fidéliser.

Peut-être pensez-vous qu’avec toutes ces fonctionnalités, une PWA va faire grimper votre budget. C’est en fait l’inverse : son développement est moins coûteux qu’une application classique, tout simplement parce qu’il est inutile de sortir une version par système d’exploitation.

L’infographie complète

(La version HD est disponible en cliquant dessus)

Infographie de qu'est-ce qu'une progressive web app ?

Infographie réalisée par David Forlot

Résumé
Qu'est-ce qu'une progressive web app ou PWA ?
Titre de l'article
Qu'est-ce qu'une progressive web app ou PWA ?
Description
Une expérience utilisateur inégalée : voilà ce que promet la Progressive web app, une technologie qui mixe les meilleures fonctionnalités des sites web et des applications mobiles. Avec cette infographie, découvrez comment fonctionnent les PWA et quels avantages en tirer.
Auteur
Editeur
Inéolab
Logo de l'Editeur

Laisser une réponse

XHTML: Tags utilisables: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Retour haut de page