Une progressive web app, ou PWA, est un site web conçu pour se comporter comme une application. Le visiteur l'ouvre dans son navigateur comme n'importe quel site. S'il revient souvent, il peut l'ajouter à son écran d'accueil. Elle s'ouvre alors en plein écran avec sa propre icône, se charge vite et peut continuer à fonctionner quand la connexion tombe.

Le sujet intéresse les vendeurs parce qu'une PWA se situe entre deux options qu'on présente d'habitude comme opposées : le site mobile et l'application mobile native. Elle promet une partie des avantages d'une application sans store, sans revue et sans commission. Savoir ce qu'elle apporte réellement vous aide à juger une proposition d'agence ou les arguments d'une plateforme.

Qu'est-ce qu'une progressive web app ?

Une PWA est une application web classique qui remplit quelques conditions techniques permettant aux navigateurs de la traiter comme une application installable. Le mot « progressive » signifie qu'elle s'enrichit par étapes : elle fonctionne comme un site normal dans n'importe quel navigateur et débloque des capacités supplémentaires là où le navigateur les prend en charge.

Concrètement, une PWA repose sur trois éléments :

  • HTTPS. Le site doit être servi sur une connexion sécurisée. Les navigateurs refusent d'installer quoi que ce soit d'autre. Voir HTTPS et TLS.
  • Un manifeste d'application web. Un petit fichier qui donne à l'application son nom, ses icônes, ses couleurs et sa manière de s'ouvrir, par exemple en plein écran sans barre de navigateur.
  • Un service worker. Un script qui tourne en arrière-plan dans le navigateur. Il peut stocker des pages et des fichiers pour un usage hors connexion, accélérer les visites suivantes et, quand c'est possible, recevoir des notifications push.

Une PWA n'est pas une application native. Dans la plupart des cas, elle ne se télécharge pas depuis un store, elle ne passe pas par la revue d'Apple ou de Google, et son accès au matériel du téléphone reste plus limité. Ce n'est pas non plus un simple site responsive. N'importe quel site peut s'adapter à un petit écran, mais seule une PWA peut s'installer et fonctionner hors connexion.

Le vocabulaire voisin : ajout à l'écran d'accueil, mode hors connexion, mise en cache, web push et Trusted Web Activity (une façon de publier une PWA sur Google Play).

Pourquoi c'est important

L'intérêt d'une PWA tient en une phrase : une seule base de code, une seule adresse, et un comportement d'application pour les clients qui le souhaitent. Les mises à jour sont en ligne dès que vous les publiez. Aucun store ne doit les valider, aucun client n'oublie de mettre à jour.

Prenons un exemple chiffré. Une marque de cosmétiques reçoit 20 000 visiteurs mobiles par mois, convertit à 1,5 % sur mobile et affiche un panier moyen de 40 €. Cela fait 300 commandes et 12 000 € par mois. L'agence chiffre une application native à 50 000 €, ou 15 000 € pour transformer la boutique existante en PWA, avec catalogue consultable hors connexion et rechargements plus rapides.

Supposons que les visites répétées plus rapides fassent passer la conversion mobile de 1,5 % à 1,65 %. Cela représente 30 commandes de plus, soit 1 200 € par mois, en touchant tous les visiteurs et pas seulement ceux qui installent une application. Les 15 000 € sont amortis en un an environ sur le chiffre d'affaires brut. L'application native apporterait peut-être un engagement plus fort auprès d'un petit noyau fidèle, mais pour plus de trois fois le prix.

Il y a des limites. Le gain de vitesse dépend de la lenteur de départ du site. Une boutique déjà rapide verra un effet plus modeste. Et l'installation elle-même est rarement utilisée par les acheteurs occasionnels. Pour la plupart des boutiques, le vrai bénéfice est la performance et la robustesse, pas l'icône sur l'écran d'accueil.

Comment ça marche

Voici ce qui se passe quand un client utilise une PWA :

  • Première visite. La page se charge comme un site classique. En arrière-plan, le navigateur enregistre le service worker et lit le manifeste.
  • Mise en cache. Le service worker conserve les fichiers essentiels, comme la mise en page, les styles, le logo et parfois les dernières fiches produits consultées, dans le stockage du navigateur.
  • Visites suivantes. Ces fichiers se chargent depuis le téléphone plutôt que depuis le réseau. Les pages s'affichent bien plus vite, même avec une 4G faible.
  • Installation. Sur Android, Chrome peut proposer d'installer l'application, ou l'utilisateur choisit « Installer » dans le menu. Sur iPhone, il touche Partager puis « Sur l'écran d'accueil ». L'icône rejoint alors les applications natives.
  • Hors connexion. Si le réseau coupe, le service worker peut afficher les pages en cache ou un écran hors connexion soigné plutôt que la page d'erreur du navigateur. Le checkout, lui, a toujours besoin d'une connexion, car le paiement doit atteindre le prestataire.
  • Mises à jour. Quand vous modifiez le site, le service worker récupère la nouvelle version à la visite suivante. Aucune revue de store n'intervient.

La prise en charge varie selon les plateformes. Android et Chrome sur ordinateur gèrent largement les PWA. Apple a ajouté le support par étapes, dont les notifications web push pour les applications ajoutées à l'écran d'accueil depuis iOS 16.4, mais certaines fonctions restent plus limitées sur iPhone. Testez toute fonctionnalité promise sur les appareils que vos clients utilisent vraiment.

Repères et exemples

Des ordres de grandeur réalistes pour juger les promesses :

  • Le coût. Ajouter des fonctions PWA à un site existant et bien construit demande souvent à un développeur quelques jours à quelques semaines. Reconstruire une boutique en PWA de zéro coûte à peu près autant qu'un site web entièrement sur mesure.
  • Le taux d'installation. Seule une petite part des visiteurs installe une PWA, souvent quelques pour cent au plus. Ne bâtissez pas votre calcul sur les installations.
  • La vitesse. Les visites servies depuis le cache se chargent en général nettement plus vite, ce qui aide le taux de conversion sur mobile, surtout là où le réseau est faible.

Situations typiques :

  • Une créatrice qui vend des téléchargements. Une page hébergée rapide suffit. L'installation apporte peu à des acheteurs occasionnels.
  • Une marque avec une audience fidèle qui rachète souvent. Une PWA peut offrir une expérience de recommande proche d'une application, sans fiche store.
  • Une boutique qui vend dans des régions mal couvertes. La mise en cache et les rechargements rapides y apportent les gains les plus nets.

Erreurs fréquentes

  • Espérer de la visibilité dans les stores. Une PWA n'apparaît pas dans l'App Store par défaut. Les gens la trouvent via votre site.
  • Promettre un checkout hors connexion. La navigation peut fonctionner hors ligne, mais le paiement exige toujours une connexion.
  • Mettre trop de choses en cache. Un service worker mal réglé peut afficher d'anciens prix ou des produits en rupture. Stock et prix doivent rester en direct.
  • Ignorer les limites de l'iPhone. Testez notifications et installation sur iOS avant de les promettre à un client ou à vos acheteurs.
  • Voir la PWA comme un remède à un site lent. Le cache aide les visites suivantes. La première visite dépend toujours d'une page légère et bien construite.

Bonnes pratiques

  • Réglez d'abord les bases de la vitesse. Optimisez les images, retirez les scripts lourds et simplifiez les pages. Une PWA s'ajoute à de bonnes performances, elle ne les remplace pas.
  • Mettez en cache le cadre, pas les données. Gardez la mise en page, les polices et les icônes. Récupérez toujours prix, stock et contenu du panier depuis le serveur.
  • Soignez l'écran hors connexion. Affichez les produits récemment consultés et un message clair plutôt qu'une erreur du navigateur.
  • Proposez l'installation au bon moment. Après une deuxième visite ou un premier achat, pas au premier chargement de page.
  • Mesurez avant et après. Comparez temps de chargement et conversion mobile sur des périodes de même durée pour savoir si le travail a payé.
  • Gardez un seul catalogue. La PWA doit tourner sur les mêmes produits, le même stock et les mêmes commandes que le reste de votre boutique.

Dans Roctify

Les vitrines Roctify ne sont pas des PWA et ne s'installent pas sur l'écran d'accueil comme une application. Roctify fournit en revanche une boutique optimisée pour les navigateurs mobiles, servie en HTTPS avec un certificat SSL gratuit, avec un panier et un checkout en une page pensés pour le téléphone. Roctify l'héberge et la maintient, donc les performances et les mises à jour de sécurité sont gérées pour vous.

Pour la plupart des créateurs et des petites marques, cela couvre ce que viserait un projet PWA : une expérience mobile rapide, que les clients ouvrent depuis un lien en bio, un email ou un message. Si votre activité demande une expérience sur mesure proche d'une application, les intégrations au-delà des fonctions intégrées se discutent dans le cadre de la formule Enterprise.

FAQ

Peut-on publier une PWA sur l'App Store ou Google Play ?

Sur Google Play, oui, grâce à une enveloppe appelée Trusted Web Activity. L'App Store d'Apple est plus strict et refuse en général les applications qui ne sont qu'un site web. Sur iPhone, une PWA s'installe donc surtout depuis Safari. La plupart des PWA sont simplement utilisées et installées depuis le navigateur.

Une PWA coûte-t-elle moins cher qu'une application native ?

En général, oui. Vous entretenez une seule base de code pour tous les appareils, et les mises à jour ne passent pas par un store. Si vous avez déjà un site solide, ajouter les fonctions PWA coûte une fraction d'une application native. Une refonte complète reste un projet plus lourd.

Les PWA peuvent-elles envoyer des notifications push ?

Sur Android et sur les navigateurs d'ordinateur, oui. Sur iPhone, les notifications web push fonctionnent depuis iOS 16.4, mais seulement si l'utilisateur a ajouté la PWA à son écran d'accueil. Cette étape supplémentaire fait que moins de personnes les reçoivent qu'avec une application native.