Progressive Web App (PWA) : à quoi ça sert et comment ça marche ?

Peut-être avez-vous déjà rencontré un site Web vous proposant de l'« installer » sur votre téléphone ou sur votre ordinateur. Pas via l'App Store ou le Play Store, mais directement dans votre navigateur. On appelle ça des Progressive Web Apps, ou PWA. Derrière cette appellation se cache une idée assez simple : faire en sorte qu'un site Web puisse s'apparenter au comportement d'une application installée sur votre terminal.

Pour un dirigeant, l'intérêt est double : donner à ses équipes ou ses clients une expérience applicative sans les coûts et les délais d'un développement mobile traditionnel (pas de soumission aux stores, pas de téléchargement, pas de commission en faveur d'Apple, Google...).

Concrètement, une PWA c'est quoi ?

Concrètement, une PWA c'est un site Web auquel on rajoute certaines capacités. Vos utilisateurs peuvent l'installer sur leur écran d'accueil, s'en servir hors ligne, recevoir des notifications... Le tout sans avoir à aller le chercher dans un store. Trois éléments particuliers rassurent du caractère d'une application web plutôt que d'un site classique.

Elle fait plus qu'un site. Géolocalisation, notifications push, accès à la caméra, stockage de manière persistante... Des fonctions auxquelles les navigateurs modernes donnent désormais accès alors qu'elles étaient autrefois cantonnées aux applications mobiles notamment. La démarcation site web / application web s'est considérablement affaiblie.

Elle fonctionne sans aucun réseau. Plutôt qu'un affichage d'un message d'erreur une fois que la connexion Internet a été coupée, vos utilisateurs voient l'application avec les informations déjà consultées sur leur réseau. Avec le retour du réseau, chacun de ses utilisateurs verra ses informations synchronisées en ligne. Vous connaissez le petit dinosaure qui s'affiche lorsque Chrome n'est pas connecté à Internet ? Avec une PWA, vos utilisateurs ne le verront jamais.

Elle s'installe facilement. L'utilisateur l'ajoute simplement sur son bureau ou sur son écran d'accueil. En le lançant l'application s'ouvre dans une propre fenêtre, sans adresse, comme n'importe quelle application native. L'icône de l'application figure au centre des autres applications, dans le lanceur d'applications.

Qu'en est-il du côté utilisateur ?

L'expérience reste transparente. L'utilisateur va consulter votre site comme à son habitude. Après quelques visites, le navigateur a repéré une interaction courante avec le site et lui propose de l'installer. S'il donne son accord, il voit apparaître une icône sur son bureau ou son écran d'accueil.

C'est simple. Il clique dessus et l'application s'ouvre dans sa propre fenêtre. Il n'a rien à télécharger, il n'a même pas à créer de compte sur un store.

Les mises à jour sont automatiques, du côté serveur. Lorsque vous corrigez un bug ou apportez une nouvelle fonctionnalité, celle-ci devrait être opérationnelle dès la prochaine ouverture. Pas de mise à jour nécessaire à télécharger depuis un store, et surtout pas de validation d'Apple ou de Google à attendre, la durée pouvant varier d'un jour à plusieurs.

C'est un atout que nombre de personnes sous-estiment. Il y a un bug bloquant en production ? Sur une PWA le correctif sera en ligne dans l'heure. Dans le cas d'une application mobile « classique », il faut compter de deux jours à trois jours minimum avant que la majorité des utilisateurs disposent de cette nouvelle version.

Le hors ligne : la grande vertu

L'intérêt majeur d'une PWA pour des équipes sur le terrain, c'est qu'elle fonctionne sans connexion Internet. Les données consultées lors des visites précédentes sont disponibles en local sur leur appareil. Si la connexion est coupée, l'application reste utilisable.

C'est un atout dans plusieurs situations.

Des commerciaux en déplacement qui consultent un catalogue ou saisissent des commandes dans des zones mal couvertes. Plutôt qu'une page fixe et blanche, ils continuent à travailler. Des techniciens sur le terrain qui remplissent des rapports d'intervention sans wifi. Un outil interne utilisé dans des locaux où la connexion est capricieuse, ce qui est bien plus fréquent qu'on ne le pense dans bien des zones d'activité.

Lorsqu'ils retrouvent la connexion, les données sont synchronisées. Dans le cas d'un utilisateur, il n'a rien à faire puisqu'il ne lui reste plus qu'à attendre, la mise à jour s'effectue en sourdine, tout se passe en arrière-plan.

Notifications push : du lien

À la manière d'une application mobile, les PWA peuvent envoyer des notifications push. Cela permet d'alerter vos utilisateurs qu'ils ont un nouveau message, que le statut de leur commande a changé ou qu'une tâche est en attente.

Sur Android, les notifications PWA fonctionnent exactement comme celles d'une application native. Sur iPhone, Apple a ouvert le support en 2023 mais l'expérience reste en retrait par rapport à Android. Le taux d'ouverture est, de toute façon, souvent inférieur sur web qu'en mobile natif et les navigateurs bloquent de plus en plus les demandes d'autorisations par défaut.

Pour un outil B2B interne, cela suffira largement. Pour une application grand public où les notifications sont stratégiques, l'application mobile native s'avère supérieure.

PWA ou application mobile : un choix à faire ?

Il ne s'agit pas de remplacer systématiquement une application mobile par une PWA. Les deux technologies satisfont des besoins distincts, à la condition que vous vous trouviez dans ce cas. Pour aller plus loin sur ce sujet, consultez notre comparatif application web ou mobile : comment choisir.

Il est préférable de choisir la PWA quand vos utilisateurs accèdent à votre service à partir de leur PC, de leur tablette et de leur mobile, ou pour éviter les délais de publication (ou de publication simultanée) dans les stores, ou quand votre budget alloué ne vous permet pas de compenser le coût d'un développement mobile en plus du site web. Dans le cas où l'on s'adresse au grand public et que l'on souhaite être présent sur les stores, quand on a besoin de Bluetooth, de NFC ou de matériels ou fonctionnalités avancées, quand les performances graphiques sont une exigence forte, alors la meilleure option est l'application native.

Dans le cadre d'une mise en place, on combine souvent les deux : un outil web à destination des gestionnaires au bureau et une application mobile pour les équipes terrain adaptées au matériel. C'est le choix qui a été fait dans le cas d'Ecma-Tech à Brest, avec Netto Drive : gestion centralisée côté web, saisie côté mobile sur le terrain.

L'impact sur vos revenus

Si votre application vous permet de générer des revenus via des achats ou abonnements, ce critère est à prendre en considération. En PWA vous utilisez le ou les prestataires de paiement de votre choix, Stripe par exemple prélève environ 2,9 % par transaction. Au sein d'un applicatif mobile, Apple et Google impose leur système de paiement et prélève entre 15 et 30 % par transaction. Avec un abonnement à 10 €/mois vous toucherez environ 9,70 € via le web, contre 7 € au mieux via les stores.

Le Digital Markets Act, en Europe, oblige à partir de 2024 Apple à libérer la bride. Mais la liberté totale est encore loin et la grande majorité des apps mobiles passe encore par le circuit de paiement imposé.

À savoir

Petits points à garder en tête avant de se lancer.

Apple reste en retrait. Les PWA tournent sur iPhone mais certaines fonctionnalités arrivent plus tard que sur Android. L'expérience d'installation est moins mise en avant que sur Chrome. Si votre cible est majoritairement basée sur les iPhones, c'est un facteur à prendre en compte.

Absentes des stores. Vos utilisateurs ne vous trouveront pas en effectuant une recherche sur l'App Store. La PWA se découvre via votre site web ou un lien. Pour un outil B2B, ce n'est pas très grave. Cela peut être le cas sur une application grand public.

Certains usages ne sont toutefois pas possibles. Si votre application nécessite le NFC, du Bluetooth complet ou l'accès aux contacts du mobile en PWA ce n'est pas possible. C'est pour ce genre de besoins qu'il faut une application native.

Le bon côté : si le navigateur ne gère pas une fonctionnalité le site fonctionne et l'utilisateur n'y perd rien mais peut simplement ne pas accéder au plus. C'est ce qu'on appelle l'amélioration progressive : on rajoute des capacités à un site qui fonctionne déjà.

Exemples précis

Nous avons conduit des projets de type PWA, comme Skreept, plateforme de l'apprentissage des utilisateurs aussi bien sur ordinateur que sur mobile. Le clic d'installation et le mode « hors ligne » correspondent à un besoin réel lorsque les apprenants sont à l'extérieur. Sur Courtageo, la plateforme de courtage immobilier, l'outil est accessible au bureau comme sur tablette chez le client. La PWA permet de ne pas multiplier les développements tout en apportant de l'interactivité et de la fluidité sur tout terminal.

Pour des outils de gestion interne d'un centre hospitalier, l'accessibilité depuis les postes de travail en salle du personnel et via tablettes est nécessaire. La PWA coche toutes les cases sans nécessiter une distribution depuis un store.

Questions fréquentes

Une PWA fonctionne-t-elle sur tous les navigateurs ? Chrome et les navigateurs basés sur Chromium offrent le meilleur support. Firefox supporte l'essentiel. Safari (iPhone, Mac) est moins avancé mais s'améliore chaque année. Si le navigateur ne supporte pas une fonctionnalité, le site fonctionne tout de même de manière plus classique.

Est-il nécessaire d'installer la PWA ? Non, l'installation n'est pas obligatoire. La PWA s'utilise tout comme un site traditionnel au sein d'un navigateur web. L'installation est simplement une manière d'ajouter l'icône sur le bureau et d'ouvrir l'application dans une fenêtre dédiée.

Peut-on transformer un site web existant en PWA ? Oui, c'est même la méthode la plus courante. La PWA est une couche que l'on ajoute dans un site ou une application web existante. Il n'y a rien à reconstruire.

Peut-on envisager de remplacer une application mobile par une PWA ? Pour des cas simples (catalogue, outil de saisie, tableau de bord), oui. Pour des cas plus complexes (Bluetooth, NFC, paiement in-app via stores), non. De plus, ciblant un large public, la présence dans les stores est un facteur d'attractivité supplémentaire.

Quel budget faut-il envisager pour ajouter la PWA dans un site existant ? Il ne s'agit pas d'un développement séparé au projet web, mais bien d'un ajout au projet. Le surcoût devient tributaire de la complexité du mode offline à mettre en œuvre, mais reste très largement moins imposant que le coût d'une application mobile dédiée.

En résumé

La PWA, c'est judicieux quand on veut donner à ses utilisateurs une expérience éminemment proche d'une application sans en avoir les moyens financiers ni les délais de mise en œuvre d'un développement mobile. Il s'agit d'un élément que l'on ajoute à un projet web existant, et qui peut évoluer vers une application native si cela devient pertinent.

Un projet web qui pourrait tirer parti du offline ou de l'installation ? Parlez-en avec nous, que vous soyez en Finistère ou ailleurs.