TECHNOLOGIES
PWA : Vos applications mobiles sans App Store
Une Progressive Web App (PWA) offre l'expérience d'une application mobile (GPS, caméra, mode hors ligne, notifications push) sans développer deux fois le même projet pour iOS et Android.
Chez SmartBooster, nous développons des PWA métier pensées pour fonctionner sans réseau (zone blanche où vous n'avez pas accès à internet), sur tablette ou smartphone, avec un code partagé entre l'interface mobile et le desktop.
QU'EST-CE QU'UNE PWA ?
Une application mobile qui vit dans le navigateur
Une Progressive Web App est un logiciel web qui adopte les comportements d'une application mobile : elle s'installe sur l'écran d'accueil, fonctionne hors ligne et accède aux capteurs de l'appareil (GPS, caméra, microphone). Elle s'exécute dans le navigateur, mais une fois installée, elle ressemble et se comporte exactement comme une application native.
En pratique, techniquement : il s'agit d'une application que nous développons en Vue.js servie en HTTPS, équipée d'un Service Worker qui gère le cache et d'une base IndexedDB qui stocke les données localement. Les utilisateurs l'installent en tapant sur "Ajouter à l'écran d'accueil" sans passer par un store.
La PWA n'est pas une technologie qui a fait ses preuves. Le concept a été formalisé en 2015 par Google (Alex Russell) et Mozilla a contribué activement à la standardisation des Service Workers au W3C. Aujourd'hui, Chrome, Firefox, Safari et Edge supportent nativement l'ensemble des APIs PWA : c'est une technologie robuste, adoptée par Twitter, Starbucks, Uber et des milliers d'applications métier.
Installable sans App Store
L'utilisateur ajoute l'application à son écran d'accueil depuis le navigateur. Aucune validation tierce n'est nécessaire.
Fonctionne hors ligne
Service Worker + IndexedDB : une fois installée, l'application peut se charger et les données saisies sont conservées sans réseau.
Accès aux APIs mobiles
GPS, caméra, scan de QRCode, microphone, torche : les mêmes capabilities qu'une application native sur Android et iOS.
COMPARATIF
PWA vs application native : ce qui change concrètement
La PWA n'est pas une version dégradée de l'app native, c'est un choix technique différent. Avantage décisif pour les projets qui ont déjà une interface desktop : le code commun est mutualisé. Vos composants Vue.js, votre API, vos règles métier : tout peu être partagé entre mobile et desktop.
| Critère | PWA | App native (iOS + Android) |
|---|---|---|
| Coût de développement | Un seul codebase web (+ mutualisé avec le desktop) | Deux projets distincts : iOS (Swift) + Android (Kotlin) |
| Délai de mise en production | Déploiement immédiat via HTTPS, sans validation tierce | Soumission App Store / Play Store : 1 à 7 jours de revue |
| Mises à jour | Instantanées : l'utilisateur reçoit la dernière version au chargement | L'utilisateur doit mettre à jour manuellement via le store |
| Accès mobile natif (GPS, caméra, micro, torche) | Oui : APIs navigateur modernes sur Android et iOS 16.4+ | Oui : accès complet aux APIs système |
| Mode hors ligne | Oui : Service Worker + IndexedDB (queue de sync automatique) | Oui : nécessite une implémentation dédiée par plateforme |
| Distribution | URL partageable, installable depuis le navigateur | App Store (Apple) et Play Store (Google) obligatoires |
| Limites techniques | Bluetooth BLE, NFC (iOS), widgets écran d'accueil non disponibles | Accès complet à toutes les APIs système |
Code mutualisé : si votre projet inclut une interface desktop (back-office, espace client), la PWA peut partager ses composants, son API et ses règles métier avec cette interface. Vous ne redéveloppez pas deux fois la même logique. Nous précisons "peut" car l'objectif de la mise en place d'une PWA est généralement de répondre à des contraintes terrains qui sont différentes de l'environnement desktop ainsi la navigation, la conception des écrans est généralement différente mais les logiques communes sont mutualisables.
CAS D'USAGE
Pour quels projets la PWA est-elle pertinente ?
La PWA excelle sur les applications métier où l'utilisateur est en mobilité, dans des environnements à connectivité variable. Voici les principaux types de projets où nous proposons des PWA à nos clients.
Saisie terrain
L'application fonctionne en zone blanche et synchronise les données au retour du réseau.
- Chiffrage chantier : Saisie sur place des métrés, matériaux prise de photo et commentaires à prendre en compte..
- Diagnostic avant réparation : Formulaire structuré, photos, QR code machine puis rapport PDF.
- Vérification contrat entretien : Checklist de contrôle avec signature client sur tablette.
- Relevé de compteurs : Scan de compteur, saisie manuelle en fallback, géolocalisation automatique.
Commerce & showroom
Catalogue consultable sans réseau, idéal pour les vendeurs en déplacement ou les showrooms haut de gamme.
- Catalogue produit hors ligne : Présentation de l'ensemble de la gamme sur tablette, même sans Wi-Fi en showroom.
- Configurateur produit : Choix de couleur, matière, option, saisie des mesures pour une estimation instantanée sans serveur.
- Bon de commande terrain : Saisie chez le client, synchronisation avec l'ERP au retour au bureau.
Formation & parcours pédagogiques
Contenu disponible hors ligne, progression sauvegardée localement.
- Parcours pédestre interactif : Carte du parcours avec points d'intérêt, scan de QRCode pour découvrir des photos et vidéos par au lieu.
- Guide de visite augmenté : Scan QR code d'une œuvre ou d'une machine, contenu multimédia chargé localement.
- Quiz de formation : Module e-learning consultable hors connexion, résultats synchronisés à la reconnexion.
Gestion interne mobile
Remplacement des outils papier ou Excel par une interface mobile simple et fiable.
- Rapport d'intervention : Technicien remplit le compte-rendu sur site : photo, signature, envoi différé.
- Remontés d'anomalies : Prise de photo et géolocalisation pour déclarer une anomalie à régler par une autre équipe sur chantier, dépôt ou magasin.
- Suivi de stock en entrepôt : Scan code-barres, mise à jour inventaire en temps réel ou différée.
CAPACITÉS MOBILES
Ce que la PWA installée apporte en fonctionnalités
Une PWA installée accède aux fonctionnalités mobiles disponibles : au GPS, à la caméra, au microphone et à la torche de l'appareil, exactement comme une application native. Elle permet un fonctionnement hors ligne grâce au Service Worker qui met le fichier en cache et à IndexedDB qui stocke les données sur votre appareil.
Geolocation API
Capture la position GPS du technicien lors des actions (prise de photo, saisie de formulaire) ou pour afficher la position de l'utilisateur sur une carte.
MediaDevices / Camera
Accès au flux vidéo de la caméra arrière pour scanner des QR codes et codes-barres en temps réel, ou capturer des photos de terrain avec compression côté client.
MediaRecorder
Enregistrement de notes vocales pendant une intervention avec pause, reprise, gestion du format audio selon l'appareil. Alternative pratique au clavier en situation de mobilité.
Network Information API
Connaître la qualité de la connexion (type, débit estimé) pour adapter le comportement de sync : texte en priorité, photos différées si réseau lent ou intermittent.
Service Worker + Cache Storage
Met en cache tous les fichiers de l'app au premier chargement, l'application s'ouvre et fonctionne entièrement sans réseau. Distinction importante : le SW cache les fichiers, pas les données utilisateur.
IndexedDB (via Dexie.js)
Stockage structuré des données utilisateur dans le navigateur (interventions, photos en blob, queue de sync). Survit aux rechargements et à la fermeture : c'est une "vrai" base de données en local.
Web App Manifest
Déclare l'application comme installable : icône sur l'écran d'accueil, mode plein écran sans barre de navigation, couleur de thème. Le résultat ressemble à une app native une fois installée.
Storage API
Mesure l'espace utilisé par la PWA et le quota disponible sur l'appareil permet en théorie d'afficher une alerte avant d'atteindre la limite, notamment pour les apps avec photos (en pratique ce n'est pas aussi précis).
ARCHITECTURE OFFLINE
Le point le plus mal compris des PWA
L'offline d'une PWA repose sur deux couches indépendantes et complémentaires. Nous vous proposons ce récapitulatif simple pour mieux comprendre le fonctionnement.
Service Worker : les fichiers de l'application
Le Service Worker intercepte les requêtes réseau et sert les fichiers (HTML, JS, CSS, images) depuis le cache local. Sans lui, l'app ne charge pas hors ligne. Il gère aussi les mises à jour : quand une nouvelle version est disponible, il la télécharge en arrière-plan et propose le rechargement à l'utilisateur.
⚠ Le Service Worker met en cache les fichiers, pas les données utilisateur.
IndexedDB : les données utilisateur
IndexedDB (via Dexie.js) stocke les données saisies par l'utilisateur : interventions, formulaires, photos. Une queue de synchronisation conserve toutes les actions effectuées hors ligne et les envoie automatiquement au retour de la connexion. L'utilisateur ne perd jamais de données.
⚠ Sans IndexedDB, les données saisies disparaissent au rechargement.
En résumé : sans Service Worker, l'application ne charge pas sans connexion. Sans IndexedDB, les données saisies disparaissent au rechargement. Les deux sont nécessaires et complémentaires. C'est l'architecture que nous implémentons dès le départ sur tout projet avec contrainte de connectivité.
DISTRIBUTION
PWA sur les stores Android et Apple
Il existe des techniques pour distribuer une PWA via les stores officiels. La situation est très différente selon la plateforme et en toute transparence, nos clients ne nous ont jamais demandé de le faire.
Android : Play Store
RecommandéGoogle propose le mécanisme officiel TWA (Trusted Web Activity) via l'outil open source Bubblewrap. Le principe est d'encapsuler la PWA dans une app Android distribuable sur le Play Store sans modifier le code. La PWA s'exécute dans Chrome mais apparaît comme une app native, sans barre de navigation.
- Mécanisme officiel Google, intégré dans le Play Store
- Aucun code natif à écrire
- Revue Play Store standard, délai ~2 jours
iOS : App Store
ComplexeApple ne propose pas d'équivalent au TWA. Des outils tiers comme PWABuilder permettent de générer un wrapper Swift minimal, mais l'approbation en App Store reste soumise à l'appréciation des reviewers Apple, certaines PWA sont refusées ou nécessitent des ajustements spécifiques.
- Pas de mécanisme officiel Apple —> wrapper tiers requis
- Approbation App Store incertaine selon le contenu
- Alternative : installation directe depuis Safari sans store
Pour les applications métier internes, l'installation depuis Safari (sans App Store) est souvent la solution la plus simple, la plus rapide et elle fonctionne parfaitement.
Notre point de vue : chez SmartBooster, nous pensons que le système d'installation par défaut de la PWA est complètement satisfaisant pour une usage simple par les utilisateurs. Nous n'avons trouvé aucun intérêt à ajouter la publication sur les stores dans nos cas d'usages.
OUTILLAGE
Les librairies clés de notre stack PWA
Ces outils sont le résultat de notre R&D interne actuelle sur les PWA et pourront évoluer en fonction des évolutions techniques. Chaque choix dépend de la qualité de l'outil et de l'éditeur ainsi que de l'adéquation avec les besoins de nos applications.
vite-plugin-pwa
Génère automatiquement le Service Worker (via Workbox) et le manifest à partir de la config Vite. Workbox gère les stratégies de cache, le precache des assets et les mises à jour automatiques —> zéro boilerplate.
Dexie.js
Wrapper autour d'IndexedDB qui expose une interface simple (`await db.table.get(id)`) avec migrations versionnées. L'API IndexedDB brute est complexe —> Dexie rend le stockage offline lisible et maintenable.
@vueuse/core
Collection de composables Vue qui encapsulent les APIs natives (`useNetwork`, `usePermission`, `useGeolocation`…). Élimine le boilerplate des event listeners et du cleanup et gère les API expérimentales avec TypeScript.
browser-image-compression
Compression photo côté client avant upload. Une photo smartphone fait 3–5 Mo ; compressée à 1200px / JPEG 75%, elle descend à 150–300 Ko. Sur réseau lent, c'est la différence entre sync réussie et timeout.
ngrok
Tunnel HTTPS pour exposer le serveur de dev local sur l'internet. Les APIs natives (GPS, caméra, micro) exigent HTTPS —> ngrok fournit un certificat reconnu par Chrome Android, contrairement aux certs auto-signés.
DOCUMENTATION OFFICIELLE
Références techniques PWA
Mozilla Foundation : référence complète des standards PWA : Service Worker, manifest, APIs web.
Google : guide officiel d'apprentissage des PWA, des bases aux patterns avancés offline-first.
Bibliothèque Google pour simplifier les stratégies de cache Service Worker (CacheFirst, NetworkFirst…).
Outil pour tester, améliorer et packager une PWA vers les stores (Android TWA, iOS wrapper).
CLI officiel Google pour générer un APK Android (TWA) depuis une URL de PWA et distribution sur Play Store.
Plugin officiel vite-plugin-pwa : documentation de configuration du Service Worker et du manifest.
GLOSSAIRE
Les termes PWA expliqués
Quelques définitions pour ne plus confondre Service Worker et IndexedDB : les deux sont nécessaires, mais ils ne font pas la même chose.
- PWA (Progressive Web App)
- Application web qui adopte les comportements d'une app mobile : installable sur l'écran d'accueil, fonctionnelle hors ligne, accès aux APIs matérielles. Elle s'exécute dans le navigateur mais n'en a pas l'apparence une fois installée.
- Service Worker
- Script JavaScript qui s'exécute en arrière-plan, indépendamment de la page. Il intercepte les requêtes réseau et peut y répondre depuis le cache — c'est le moteur du mode hors ligne. Sans Service Worker, pas de PWA offline.
- Cache API
- Stockage contrôlé par le développeur (et non par le navigateur) où le Service Worker place les fichiers statiques de l'app : HTML, CSS, JS, images. Ces fichiers se chargent instantanément depuis ce cache, même sans réseau. À ne pas confondre avec le cache HTTP classique, que le navigateur gère seul.
- Web App Manifest
- Fichier JSON déclarant les métadonnées de l'app installable : nom, icônes, couleur de thème, orientation, mode d'affichage. C'est ce fichier qui permet au navigateur de proposer l'installation de la PWA sur l'écran d'accueil.
- A2HS (Add to Home Screen)
- Mécanisme par lequel le navigateur invite l'utilisateur à installer la PWA sur son écran d'accueil. Ce n'est pas un téléchargement depuis un store : c'est un raccourci intelligent qui transforme l'onglet web en application autonome avec sa propre icône et son propre mode d'affichage plein écran.
- IndexedDB
- Base de données intégrée au navigateur pour stocker les données utilisateur de façon structurée. Asynchrone et persistante entre les rechargements. Attention : si l'espace disque de l'appareil est saturé, le navigateur peut nettoyer ce stockage. Pour l'éviter, l'API StorageManager permet de demander la persistance explicite des données —> le navigateur ne les supprimera alors qu'avec l'accord de l'utilisateur.
- App Shell
- Modèle d'architecture qui sépare l'interface minimale de l'app (menus, barres de navigation, squelette visuel) du contenu dynamique. L'App Shell est mis en cache une fois pour toutes via le Service Worker, ce qui donne la sensation de vitesse native à chaque ouverture —> l'interface s'affiche immédiatement pendant que les données se chargent.
- Background Sync
- API qui permet de différer l'envoi de données jusqu'à ce que l'appareil retrouve une connexion stable. Exemple concret : un technicien valide un rapport en zone blanche —> la PWA le conserve et l'envoie automatiquement dès que le réseau revient, même si l'application a été fermée entre-temps.
- Web Share API
- API qui permet à la PWA d'utiliser le menu de partage natif de l'appareil (WhatsApp, SMS, Mail, etc.). L'utilisateur partage un contenu depuis la PWA exactement comme depuis une app native — un détail qui renforce la perception d'une vraie application.
- TWA (Trusted Web Activity)
- Mécanisme Android officiel (Google) permettant d'encapsuler une PWA dans une app Android native distribuable sur le Play Store. La PWA s'exécute dans Chrome mais apparaît comme une app normale, sans barre de navigation.
- Offline-first
- Architecture où l'app est conçue pour fonctionner sans réseau par défaut, et se synchronise quand la connexion revient. Le contraire d'une application qui affiche une erreur réseau —> ici, l'utilisateur ne voit jamais de blocage.
- Zone blanche & réseau dégradé
- Une zone blanche est un endroit sans couverture réseau mobile, généralement faute d'antenne relais à proximité. Causes fréquentes en milieu professionnel : bâtiment industriel avec structure métallique (effet cage de Faraday, qui bloque les ondes électromagnétiques), murs en béton armé ou en pierre épaisse, sous-sol, entrepôt. Le réseau dégradé (EDGE, H+) est un cas intermédiaire : la connexion existe mais le débit est trop faible pour un usage fiable. Une PWA offline-first gère les deux cas de la même façon : l'utilisateur travaille normalement, les données sont synchronisées dès que la connexion le permet.
FAQ
Les réponses à vos questions
Et si vous ne trouvez pas ce que vous cherchez, nous serons ravis de vous répondre en direct lors d'un rendez-vous entre humains !
Dans la plupart des projets métier, oui et pour une raison structurelle : le code est mutualisé. La PWA partage sa base technique avec l'interface desktop (même Vue.js, même API, mêmes composants). Vous ne payez pas deux fois le développement comme avec une app iOS et une app Android distinctes. De plus, les mises à jour sont instantanées sans validation store, ce qui réduit les coûts de maintenance. Le ROI est d'autant plus fort que les fonctionnalités requises entrent dans le périmètre de la PWA si votre besoin implique Bluetooth BLE, NFC (iOS) ou des widgets système, l'app native redevient pertinente.
La PWA couvre aujourd'hui environ 90% des besoins métier mobiles : GPS, caméra, scan, micro, mode hors ligne, notifications push. Ce qui reste hors portée : le Bluetooth BLE (capteurs médicaux, IoT), le NFC sur iOS (paiement, badges), les widgets sur l'écran d'accueil, et l'accès au système de fichiers complet. Si votre application de terrain a besoin de dialoguer avec un capteur physique via Bluetooth ou de lire des badges NFC sur iPhone, une app native reste nécessaire. Dans tous les autres cas, la PWA suffit.
Une PWA est sécurisée par construction : elle exige HTTPS, ce qui garantit le chiffrement des échanges. Les données stockées localement (IndexedDB) sont isolées par origine, une autre app ne peut pas y accéder. Les APIs sensibles (caméra, GPS, micro) nécessitent une validation explicite de l'utilisateur, exactement comme une app native. Sur le plan applicatif, la sécurité dépend de la qualité du code et de l'API backend, ce sont les mêmes bonnes pratiques que pour n'importe quelle application web : authentification robuste, validation des données côté serveur, gestion fine des droits.
Oui, à condition que l'architecture soit conçue en offline-first dès le départ. Le Service Worker met en cache les fichiers de l'application (HTML, JS, CSS) au premier chargement. Dexie (IndexedDB) stocke les données saisies par l'utilisateur. Une queue de synchronisation conserve les actions effectuées hors ligne et les envoie automatiquement au retour de la connexion. Le technicien travaille normalement en zone blanche, l'application indique visuellement ce qui est en attente de sync, mais ne bloque jamais.
Sur Android, oui facilement : Google propose le mécanisme TWA (Trusted Web Activity) via l'outil Bubblewrap. La PWA est encapsulée dans une app Android distribuable sur le Play Store, sans recoder quoi que ce soit. Sur iOS, c'est possible via des outils comme PWABuilder qui génère un wrapper Swift. Cependant Apple ne propose pas de mécanisme officiel équivalent au TWA, et l'approbation en App Store reste soumise à l'appréciation des reviewers Apple, certaines PWA sont refusées. Pour la grande majorité des applications métier, l'installation directe depuis le navigateur Safari (sans passer par l'App Store) est la solution la plus simple et la plus rapide.
POUR ALLER PLUS LOIN
Approfondir votre réflexion
La PWA s'inscrit dans un projet logiciel complet : back-office, API, interface desktop. Découvrez notre approche du développement sur mesure.
La PWA partage sa stack Vue.js avec l'interface desktop. Découvrez pourquoi nous avons choisi Vue.js pour nos projets métier.
Une PWA en production évolue avec votre métier. Notre service TMA assure les montées de version, correctifs et évolutions fonctionnelles.
Vous avez une idée d'application mobile métier ? Commencer par un prototype PWA est souvent le chemin le plus rapide pour valider le concept.
Vous avez un projet ?
Contactez-nous pour savoir comment nous pouvons vous aider.