Une PWA, ou Progressive Web App, est une application construite avec les technologies du web, accessible par une URL et installable sur les appareils compatibles. Elle peut proposer du hors-ligne et des notifications, à condition de les développer et de vérifier leur disponibilité.
Vous voulez permettre à vos clients de réserver un créneau depuis leur téléphone. Faut-il leur demander de télécharger une application avant leur première réservation ? Une PWA permet de commencer dans le navigateur, puis de proposer une installation aux utilisateurs réguliers.
Partez de ce parcours, puis vérifiez les fonctions indispensables. Le mot « PWA » ne garantit ni la rapidité, ni le fonctionnement sans réseau, ni toutes les capacités d’une application native.
PWA : c’est quoi, concrètement ?
Une Progressive Web App reste une application web : son interface utilise HTML, CSS et JavaScript. Elle peut partager une base de code entre ordinateur et mobile. Sa particularité est d’ajouter des capacités d’application, comme une ouverture dans une fenêtre dédiée après installation. La présentation des PWA par MDN décrit cette approche progressive.
Un site responsive adapte sa mise en page à l’écran. Une PWA va plus loin dans l’intégration à l’appareil, mais doit d’abord rester utilisable comme site. Un formulaire de réservation accessible par lien peut ainsi devenir un outil que le client retrouve sur son écran d’accueil.
Installation, hors-ligne et notifications
Installer ne veut pas dire tout télécharger
Le manifeste web décrit notamment le nom, les icônes et le mode d’affichage de l’application. En production, HTTPS fait partie des conditions de base. Les critères et parcours d’installation varient selon le navigateur : une invitation automatique dès la première visite n’est pas garantie.
L’installation n’enregistre pas automatiquement toutes les pages et données. Il faut donc tester séparément l’ajout à l’écran d’accueil et les usages sans connexion.
Le hors-ligne se conçoit parcours par parcours
Un service worker peut intercepter les requêtes et servir des ressources mises en cache. Les données métier peuvent être conservées localement, par exemple dans IndexedDB. MDN détaille les mécanismes de fonctionnement hors connexion et en arrière-plan.
Pour une fiche d’intervention, afficher un dossier déjà téléchargé est un premier besoin. Enregistrer une modification hors ligne puis la synchroniser en est un autre. Il faut prévoir les conflits, les erreurs d’envoi et un état « en attente de synchronisation » compréhensible.
Un paiement ou une réservation confirmée par le serveur reste dépendant du réseau. Le produit doit distinguer un brouillon local d’une opération réellement validée.
Les notifications existent aussi sur iPhone
Depuis iOS et iPadOS 16.4, les applications web ajoutées à l’écran d’accueil peuvent demander l’autorisation d’envoyer des notifications push. La demande doit suivre une interaction directe de l’utilisateur, comme un bouton d’abonnement. Ces conditions sont précisées par WebKit.
Cela ne rend pas les notifications universelles : installation, permissions et environnement restent à vérifier. Prévoyez un parcours utilisable même lorsque l’utilisateur refuse cette autorisation.
Les limites à vérifier avant de choisir
La caméra ou la géolocalisation peuvent être accessibles via les API web, selon les permissions et le navigateur. Pour un périphérique Bluetooth précis, un traitement prolongé en arrière-plan ou une intégration système, vérifiez chaque API sur les appareils cibles.
Le navigateur contrôle aussi l’exécution des service workers : ce ne sont pas des processus permanents. Une synchronisation au retour dans l’application peut être nécessaire si le mécanisme d’arrière-plan attendu n’est pas disponible.
Enfin, une mise à jour web n’efface pas les problèmes de versions. Une application déjà ouverte et des ressources en cache peuvent conserver un ancien comportement. Prévoyez le renouvellement du cache et la reprise des brouillons lors d’une mise à jour.
Quand choisir une PWA ?
| Votre besoin | Décision à envisager |
|---|---|
| Réservation ou consultation accessible par un lien | PWA si l’installation apporte un usage récurrent |
| Portail client avec documents consultables hors ligne | PWA avec téléchargement et synchronisation explicitement conçus |
| Simple site d’information sans usage récurrent | Site responsive, sans ajouter une installation inutile |
| Intégration matérielle ou arrière-plan indispensables | Prototype sur appareils réels, puis comparaison avec le natif |
Une PWA peut mutualiser le travail web et mobile. Le budget doit toutefois inclure les tests sur plusieurs navigateurs, la gestion du cache et les parcours dégradés. Aucun pourcentage d’économie ne découle du seul choix technologique.
Pour cadrer une création d’application mobile, commencez par le parcours le plus contraignant. Faites-le fonctionner sur les téléphones de votre public avant de généraliser l’approche.
Ce qu’il faut retenir
Une PWA permet de distribuer une application par une URL et d’ajouter des capacités utiles aux visiteurs réguliers. Son intérêt dépend du parcours : installation, consultation hors ligne et notifications doivent répondre à un besoin concret.
Le choix se valide sur les appareils cibles. Les contraintes de synchronisation, de permissions et d’accès au matériel comptent autant que le partage du code.
Questions fréquentes
Une PWA fonctionne-t-elle sans Internet ?
Seulement pour les ressources et les opérations prévues à cet effet. Un dossier enregistré peut rester consultable ; une information jamais téléchargée ou une validation serveur nécessite une connexion.
Peut-on transformer un site existant en PWA ?
Oui, en ajoutant progressivement les capacités utiles. Un manifeste ne suffit pas à créer un mode hors ligne : il faut adapter les données, les écrans et la gestion des erreurs.
Conclusion
Choisissez une PWA si l’accès par lien et les capacités du navigateur couvrent vos usages essentiels. Listez d’abord ce qui doit fonctionner sans réseau et ce qui dépend du téléphone.
Pour examiner ces contraintes et choisir une approche, réservez un échange de 30 minutes.