Progressive web apps : 10 questions pour comprendre les enjeux clés

Nous sommes convaincus que les apps classiques et les progressive web apps ne sont pas de même nature et n’adressent pas la même ambition. Le point en dix questions.

La question revient en boucle depuis le printemps dernier "les Progressive Web Apps (PWA) vont-t-elles sonner la fin des apps ?". 

Les marques les plus avancées commencent à partager leurs retours d’expérience et le débat initialement restreint à la sphère des experts tech s’est petit à petit élargi ces derniers mois aux directions marketing, digitales et à la DSI qui doivent décider sur quoi focaliser leur budget et l’énergie de leurs équipes.

En cette fin d’année et avec un internet désormais "mobile-first" nul doute qu’un certain nombre de projets de refonte vont devoir répondre à ces questions et affirmer une stratégie et une position claire pour les prochains mois.

Au travers de ces 10 questions, nous allons partager avec vous notre conviction que les apps et les PWA ne sont pas de même nature et n’adressent pas la même ambition. 

Vous verrez également en quoi PWA est l’évolution du web, et comment la check-list que constitue PWA vous permettra de tendre vers une performance optimale de votre interface web pour vos utilisateurs.

1 - Une PWA, en clair, qu’est-ce que c’est ?

Avec l’avènement d’un internet résolument "mobile-first" et un smartphone qui porte désormais la croissance du commerce et de la publicité en ligne, il devient nécessaire pour les annonceurs & les marchands d’optimiser l’expérience utilisateur sur leur site mobile, où les taux de conversion restent historiquement très inférieurs au desktop.

Dans le même temps, le développement des applications mobiles, plus performantes que les sites mobiles, a obligé les acteurs du web à chercher de quelle manière optimiser l’expérience sur smartphones au travers des navigateurs pour essayer de se mettre à niveau.

Une PWA répond à cette double problématique et tourne autour de 4 grands objectifs :

• Faciliter l’accès au service : contrairement aux apps, l’accès à un site n’est pas immédiat,
• Fonctionner sans ou avec un faible réseau : la plupart des sites ne fonctionnent pas hors réseau ou n’ont pas été optimisés pour des débits faibles (3G),
• Augmenter l’engagement des consommateurs : la plupart des visiteurs d’un site ne peuvent pas être recontactés simplement,
• Améliorer les performances et notamment les conversions : les sites mobiles ont aujourd’hui des performances bien inférieures aux sites desktop/PC et aux apps.

Apparu en 2015, PWA, pour "Progressive Web App" est une réponse packagée par Google pour optimiser votre site web et créer une web application. Celle-ci est accessible et téléchargeable depuis un navigateur (Chrome, Edge, Safari, Firefox…), par opposition à une application qui est, elle, à télécharger depuis un magasin d’applications (Apple Store ou Google Play).

L’implantation d’une PWA doit ainsi garantir l’expérience suivante :

• Progressive : Les applications web progressives fonctionnent sur n'importe quel périphérique en intégrant les fonctionnalités disponibles du navigateur et de l'appareil utilisé,
• Sécurisée : Afin de répondre aux problématiques de sécurité des échanges entre les utilisateurs et les sites, les PWA doivent être fiables et sûres par la mise en place d’un protocole https,
• Engageante : Elles proposent une expérience utilisateur immersive en plein écran et un réengagement facilité grâce à l'envoi de notifications push web,
• Installable : L’utilisation d'un fichier manifest permet aux PWA de proposer, à l'instar d'une application mobile native, l'installation d'un raccourci sur l'écran d'accueil du terminal mobile,
• Rapide : D’après Google, 53% des internautes abandonnent un site si le chargement prend plus de trois secondes. Une fois le site chargé, la navigation doit se faire de manière rapide et fluide,
• Optimisation pour le référencement : Utilisant les technologies du web, les progressive web apps peuvent être référencées sur les moteurs de recherche de la même manière que n'importe quel site web classique.
• Indépendante de la connexion : Grâce à la gestion du cache via l’utilisation d’un service worker, une fois le contenu chargé une première fois, il est possible de le consulter même dans les zones de faible connexion réseau.

La PWA répond ainsi à la promesse d’offrir aux utilisateurs visitant votre site web une expérience assez proche de celle d’une application sans en avoir les inconvénients (téléchargement, espace de stockage important, délais de mise à jour…).

D’où parfois la tentation de les opposer, à tort de notre point de vue.

2 - Une PWA, comment ça marche ?

La PWA propose un certain nombre de fonctionnalités venant enrichir l’expérience proposée aux consommateurs. Parmi les grandes fonctionnalités :

• L’ajout de l’icône de la PWA sur l’écran d’accueil,
• Un chargement & une transition fluide entre les pages (loader, écran squelette...),
• La gestion du mode hors ligne ou réseau dégradé (offline),
• L’accès à certains capteurs du terminal (GPS, accéléromètre, gyroscope),
• L’envoi de web push notifications.

Il est à noter que certaines fonctionnalités existent hors PWA comme la notion de cache (pour gérer le offline) déjà présente sur les navigateurs mais avec un certain nombre de limitations.

Techniquement, au-delà des éléments classiques constituant un site web, une PWA est composée de trois éléments clés : 

1. Le respect d’un ensemble de bonnes pratiques garantissant les performances et la sécurisation du site internet (ex. utilisation du protocole https, site responsive),
2. L’ajout d’un web app manifest (fichier JSON) décrivant les propriétés du site internet,
3. L’implémentation de service workers (fichier(s) JavaScript) qui permettent, en s’appuyant sur le cache du navigateur, de donner accès à l’application web en mode déconnecté et qui permettent aussi la gestion des push notifications. Les service workers permettent aussi de gérer les différentes versions du site et notamment le rafraichissement du cache en cas d’évolution du site.

PWA n’est pas un langage de développement ou un framework mais s’appuie sur les standards existants.

3 - Une PWA fonctionne-t-elle sur tous les OS, navigateurs & terminaux ?

Oui, une PWA a vocation à être universelle, quel que soit le terminal (smartphones, tablettes ou PC/desktop), l’OS (iOS, Android, Windows, Linux…) ou le navigateur (Chrome, Safari, Firefox, IE…).

Néanmoins les fonctionnalités disponibles restent dépendantes à la fois du navigateur et de l’OS. L’utilisateur n’aura pas forcement accès à toutes les options en fonction de la configuration dans laquelle il se trouve.

En effet, le support des fonctionnalités PWA - fortement poussée par Google - n’a pas le même niveau sur Chrome (Google) que sur Safari ou Firefox. De même les terminaux fonctionnant sous Android autorisent plus facilement les interactions avec la PWA.

Même si la PWA adresse avant tout le smartphone, elle est par nature responsive (au moins sur les tablettes). Il est donc tout à fait possible d’installer une PWA sur un PC. Les problématiques de lenteur de réseau ou de mode déconnecté étant plus rares sur desktop, le bénéfice sera moins perceptible pour l’utilisateur, mais la performance restera au rendez-vous.

4 - Une PWA demande-t-elle une technologie front particulière ?

La notion de PWA est compatible avec les standards du marché HTML5, CSS3 et JavaScript, très largement répandus aujourd’hui.

Outre les service workers au format JavaScript et le manifest au format JSON, PWA n’impose pas de langage de développement pour le site en lui-même. Un site web s’appuyant sur un framework JavaScript front, tel que React, Angular ou Vue.js pour ne citer que les trois frameworks les plus en populaires, est donc tout à fait éligible à un passage en PWA. 

L’outil Lighthouse de Google vous permet d’ailleurs de vérifier automatiquement si un site respecte les grands principes d’une PWA.

De même, une PWA ne nécessite pas forcement une approche dite single page app (pour faire simple un site qui a une seule page dans laquelle les données affichées changent en fonction des appels aux web services, sans navigation d’une page à l’autre), qui est parfois un sujet sensible pour les acteurs fortement dépendants de leur positionnement SEO.

5 - Une PWA a-t-elle un impact sur l’infrastructure SI & le back-end ?

La mise en place d’une PWA a peu d’impact sur l’infrastructure back-end de l’entreprise.

Une PWA étant une web application, celle-ci peut consommer des web services, comme les applications mobiles ou les sites internet. La plupart des entreprises ayant aujourd’hui APIsé leur backend sous le (bien connu) format REST/JSON, cela ne devrait donc pas être un frein (sinon il faut vite entamer ce chantier !).

Côté CMS (Content Management System), on s’orientera plutôt vers des solutions de type headless CMS qui sont aujourd’hui proposées par les acteurs majeurs du marché (Wordpress, Drupal) ou certains plus spécialisés (Directus, Ghost, Contentful, Prismic…).

Côté serveurs, aucun prérequis sur le langage utilisé (PHP, Java, Node…) ou type de serveur web (Ngnix, Apache...) n’est nécessaire.

6 - Quel est l’impact d’une PWA sur le SEO ?

Pour un site respectant déjà les bonnes pratiques de développement et de référencement (l’utilisation de balisage sémantique schema.org, la définition d’URLs canoniques, ou encore l’utilisation du protocole https), le passage en PWA n’a en tant que tel aucun impact.

Deux éléments peuvent néanmoins influer sur le référencement naturel :

• D’une manière potentiellement négative, la PWA couplée à une approche single page app dont nous parlions plus haut pourrait avoir un effet négatif sur le référencement, dans la mesure où les contenus ne sont plus lisibles par les crawlers des moteurs de recherche. Il existe néanmoins un certain nombre de solutions (pre-rendering côté serveur notamment) permettant de limiter l’impact sur le SEO.
• D’une manière positive, la préférence est accordée par Google dans son référencement sur la SERP aux sites respectant les bonnes pratiques, dont la PWA fait partie.

7 - Une PWA remplace-t-elle un site ou vient-elle en complément ?

La PWA est avant tout une évolution d’un site web et peut être mise en place sur la base d’un site existant. Il n’est donc pas nécessaire de construire et maintenir deux versions d’un même site pour passer en PWA. Sauf nécessité de refondre en profondeur un site web, le passage en PWA pourra être réalisé progressivement et n’impactera pas l’utilisateur.

Néanmoins cela ne veut pas dire que l’ensemble de votre site doit être en PWA. 

Certains sites proposent des contenus en PWA et des contenus classiques, voire des pages AMP (accelerated mobile pages), une autre technologie poussée par Google pour alléger les pages et accélérer les temps de chargement. Un mini-site en AMP peut ensuite pointer par exemple vers une page du site en PWA pour continuer le parcours. C’est un moyen intéressant poussé par Google pour optimiser l’expérience utilisateur d’une landing page, 1er contact d’un utilisateur avec la marque.

On peut donc avoir des sites hybrides en fonction des contenus et des usages des consommateurs.

8 - Une PWA remplace-t-elle une app ou vient-elle en complément ?

Nous considérons que la PWA est avant tout là pour offrir la meilleure expérience web possible à vos utilisateurs, notamment ceux découvrant votre service depuis Google ou Facebook. Le meilleur du web en quelque sorte pour cette première impression ou ce rendez-vous ponctuel.

De la même manière, nous considérons que l’app native est un complément indispensable pour un certain nombre de marques souhaitant offrir la meilleure expérience mobile à leurs clients les plus fidèles, ou un fonctionnel nécessitant une intégration forte avec l’OS (ex : paiement, réalité augmentée…), notamment lors d’interactions avec le monde physique (en point de vente par exemple).

Bien évidemment, les marques ayant un budget limité peuvent voir dans la PWA un moyen de ne plus avoir d’applications mobiles à maintenir (cas un peu extrême à étudier avec précaution selon le nombre d’utilisateurs actifs quotidiens & mensuels - DAU/ MAU - de votre app). 

Avant d’en arriver là, et dans un monde de plus en plus mobile, nous recommandons d’étudier la possibilité de développer des applications hybrides permettant de mutualiser les investissements et de conserver une présence sur les magasins d’applications, même si la maintenance d’une app hybride a ses contraintes.

9 - Une PWA s’adresse-t-elle à tous les acteurs, tous les secteurs ?

La PWA ne s’adresse pas une typologie d’acteurs en particulier.

Néanmoins, comme l’AMP (pour des questions de SEO notamment), PWA a notamment été déployée par des médias (Les Echos, L’Equipe) et commence seulement à trouver de l’écho auprès des marchands.

Pour mieux vous rendre compte de l’expérience PWA par rapport aux sites traditionnels, vous pouvez jeter un œil ici. Ce site, lui-même en PWA, rassemble des exemples dans différents secteurs d’activité (voir notamment AliExpress, Financial Times).

10 - Quels bénéfices attendre en terme de performance d’une PWA?

Le site PWA stats liste quelques exemples (Best Western, Tinder, Trivago, Uber…). Certains marchands ont également partagé les premiers résultats, comme AliExpress ou Rue du Commerce avec des KPIs en forte augmentation :

• Taux de rebond divisé par 2,
• Taux de conversion x2,
• Nombre de pages / session : x2,5,
• Panier moyen : +20% !

Difficile cependant d’identifier dans ces communications promotionnelles, les gains liés au passage de ces sites en PWA des gains liés à la mise en place de bonnes pratiques web comme la compression des images dans un format de nouvelle génération (JPEG 2000, JPEG XR, et WebP).

En conclusion !

Vous l’aurez compris, les apps et les PWA ne sont pas de même nature et n’adressent pas la même ambition. PWA est avant tout l’évolution du web permettant de tendre vers une expérience web optimale. Mais pour ce qui est de l’amélioration de l’expérience mobile à proposer à vos utilisateurs et dans le cadre d’une stratégie mobile ambitieuse, PWA n’est pas une option suffisante.