Qu'est-ce qu'une PWA ?
Une PWA est une application web, donc accessible par une adresse dans un navigateur, à laquelle on a ajouté ce qui manquait au web pour ressembler à une application : une icône sur l'écran d'accueil, une ouverture en plein écran, un fonctionnement sans réseau et des notifications.
Le sigle vient de l'anglais Progressive Web App. MDN, la documentation web de Mozilla, la définit comme une application construite avec les technologies de la plateforme web, mais qui offre une expérience proche de celle d'une application propre à un système. Quant au mot « progressive », le guide « Progressively enhance your Progressive Web App », publié en juin 2020 sur web.dev, le site de Google consacré au développement web, le rattache au principe d'amélioration progressive : une base de contenu et de fonctions pour tous, puis des capacités supplémentaires là où le navigateur les prend en charge. Il n'existe ni label ni certification : une PWA est un ensemble de techniques du web, pas un type d'application homologué.
Comment fonctionne une PWA ?
Une PWA ajoute deux éléments techniques à une application web, puis compte sur l'utilisateur pour l'installer.
- Le manifeste d'application web : un petit fichier qui donne le nom, les icônes et le mode d'affichage. WebKit précise que, pour qu'un site ajouté à l'écran d'accueil d'un iPhone s'ouvre comme une application et non comme un simple signet, ce manifeste doit déclarer un affichage « standalone » ou « fullscreen ».
- Le service worker : un script qui tourne en arrière-plan du navigateur. Il conserve en cache les écrans et les données pour le travail hors ligne, et reçoit les notifications : WebKit décrit les notifications web comme le fruit des API Push et Notifications et des service workers, qui fonctionnent ensemble.
- L'installation : l'utilisateur ajoute l'application depuis son navigateur. Sur iPhone, l'option d'ajout à l'écran d'accueil se trouve dans le menu Partager, et WebKit indique que, depuis iOS 16.4, les navigateurs autres que Safari peuvent aussi la proposer.
Le reste est le code d'une application web classique, par exemple en React ou Next.js : une seule base, mise à jour sur le serveur et disponible pour tous les utilisateurs au prochain chargement.
Exemples de PWA en entreprise
- Portail client : suivi des commandes, factures à télécharger, demande d'intervention, installé par les clients réguliers sur leur téléphone.
- Outil de saisie interne : inventaire, relevé de compteurs, check-list de contrôle sécurité, utilisé sur les tablettes de l'entreprise.
- Catalogue commercial : consultable pendant un rendez-vous, même avec un réseau faible, grâce aux données mises en cache.
- Plateforme à plusieurs profils : la plateforme Klass., livrée par YMHB Web pour la sous-traitance pédagogique, compte une PWA dans son socle technique, à côté de Next.js et de Supabase ; ses utilisateurs y gèrent notamment l'émargement par QR code.
Une PWA est aussi un moyen de tester un MVP sur mobile auprès de vrais utilisateurs avant d'investir dans une application publiée sur les stores.
PWA ou application native : quand choisir quoi ?
La PWA est le bon choix quand l'usage est simple et fréquent ; l'application native ou multiplateforme s'impose quand le téléphone devient un outil de travail exigeant.
| Besoin | PWA | Application native ou multiplateforme |
|---|---|---|
| Être trouvé dans l'App Store et Google Play | Non, par défaut | Oui |
| Diffuser une correction immédiatement | Oui, côté serveur | Après publication d'une nouvelle version sur les stores |
| Notifications push sur iPhone | Oui depuis iOS 16.4, si l'application est ajoutée à l'écran d'accueil | Oui |
| Journée entière sans réseau, avec photos, signatures et PDF | Possible, à tester sur les appareils réels | L'approche la plus éprouvée |
| Accès poussé au matériel (Bluetooth, NFC, capteurs) | Variable selon le navigateur et le système | Complet |
Pour l'application terrain de Cap Vert, qui doit fonctionner sans réseau avec rapports photo, signatures et PDF générés sur le téléphone, YMHB Web a livré une application iOS et Android. Les critères sont détaillés dans le comparatif PWA ou application native.
Les idées reçues sur les PWA
- « Une PWA, c'est un site responsive. » Un site responsive s'adapte à la taille de l'écran ; une PWA s'installe, se lance comme une application et peut fonctionner sans réseau.
- « Les PWA ne fonctionnent pas sur iPhone. » WebKit a annoncé en février 2023 qu'avec iOS et iPadOS 16.4, une application web ajoutée à l'écran d'accueil peut recevoir des notifications push et afficher une pastille sur son icône.
- « Il faut un compte développeur Apple. » Pour les notifications push des applications web, WebKit indique qu'il n'est pas nécessaire d'être membre de l'Apple Developer Program.
- « On peut envoyer des notifications dès la première visite. » Sur iPhone, WebKit précise que la demande d'autorisation doit répondre à une action directe de l'utilisateur, comme un appui sur un bouton « s'abonner ».
Termes voisins
- Application native : une application développée pour un système précis (Swift pour iOS, Kotlin pour Android), distribuée par les stores.
- Application multiplateforme : une application écrite une fois avec Flutter ou React Native pour iOS et Android, elle aussi distribuée par les stores.
- Application web ou application mobile : le comparatif pour décider du support avant de parler technologie.
- Service worker : le script d'arrière-plan qui gère le cache et les notifications d'une PWA.
Questions fréquentes
- Que veut dire PWA ?
- PWA est le sigle de l'anglais Progressive Web App, traduit par application web progressive. Une PWA désigne une application web qui peut s'installer sur l'écran d'accueil d'un téléphone ou d'un ordinateur, s'ouvrir sans barre d'adresse, fonctionner en partie hors ligne et envoyer des notifications. Elle est développée avec les technologies du web et diffusée par une adresse, sans passer par les stores.
- Une PWA peut-elle être publiée sur l'App Store ou Google Play ?
- Une PWA ne se publie pas telle quelle dans les stores : elle s'installe depuis le navigateur. Pour être présente sur l'App Store ou Google Play, il faut produire une application pour chaque store à partir de l'application web, et cette application passe alors par les règles de validation de chaque plateforme. Si la présence en store est indispensable, une application multiplateforme est souvent plus simple.
- Une PWA fonctionne-t-elle hors ligne ?
- Oui, une PWA peut fonctionner hors ligne grâce à son service worker, qui conserve en cache les écrans et une partie des données. Les saisies faites sans réseau sont stockées sur l'appareil puis envoyées au retour de la connexion, si l'application a été conçue pour cela. Pour un usage intensif sans réseau, avec photos et documents lourds, il faut tester sur les appareils réels.
- Une PWA coûte-t-elle moins cher qu'une application mobile ?
- Une PWA demande en général moins de travail qu'une application publiée sur les stores, car il n'y a qu'une base de code web à maintenir et aucune publication à gérer. L'économie disparaît si le besoin dépasse ce que permet le navigateur, par exemple un accès poussé au matériel : il faut alors contourner les limites ou refaire l'application. Le bon choix se décide au cadrage, selon les usages réels.