Qu'est-ce qu'une Progressive Web App ?
Une PWA est une application web qui utilise des technologies modernes (service workers, manifest, HTTPS) pour offrir une expérience similaire à une application native : installation sur l'écran d'accueil, fonctionnement hors ligne, notifications push et performances optimisées.
L'avantage principal : un seul code base web qui fonctionne sur tous les navigateurs et tous les appareils, sans passer par les stores d'applications.
Le Web App Manifest
Le fichier manifest.json décrit votre application au navigateur :
- name / short_name : nom affiché sur l'écran d'accueil et dans le lanceur.
- icons : icônes en différentes tailles (192x192, 512x512 minimum).
- start_url : URL de démarrage quand l'utilisateur lance l'application installée.
- display : mode d'affichage (standalone pour ressembler à une app native, fullscreen, minimal-ui).
- theme_color / background_color : couleurs de la barre de statut et du splash screen.
Service Workers : le coeur de la PWA
Le service worker est un script qui s'exécute en arrière-plan, indépendamment de la page web. Il permet :
- Le cache intelligent : intercepter les requêtes réseau et servir des réponses depuis le cache.
- Le fonctionnement hors ligne : afficher une version cached de l'application quand le réseau est indisponible.
- Les notifications push : recevoir et afficher des notifications même quand l'application est fermée.
- La synchronisation en arrière-plan : envoyer des données au serveur quand la connexion revient.
Stratégies de cache
Choisissez la stratégie adaptée à chaque type de ressource :
- Cache First : servez depuis le cache, revalidez en arrière-plan. Idéal pour les assets statiques (CSS, JS, images).
- Network First : essayez le réseau d'abord, fallback sur le cache. Pour les données dynamiques (API).
- Stale While Revalidate : servez depuis le cache immédiatement, mettez à jour en arrière-plan. Bon compromis entre vitesse et fraîcheur.
Utilisez Workbox (Google) pour simplifier l'implémentation des stratégies de cache sans écrire de service worker from scratch.
Performance et Core Web Vitals
Une PWA performante doit respecter les Core Web Vitals :
- LCP (Largest Contentful Paint) inférieur à 2,5 secondes.
- INP (Interaction to Next Paint) inférieur à 200 millisecondes.
- CLS (Cumulative Layout Shift) inférieur à 0,1.
Optimisez avec : lazy loading des images, code splitting, compression des assets et preloading des ressources critiques.
Limites des PWA
Les PWA ne remplacent pas toujours les applications natives :
- Accès limité à certaines API matérielles (Bluetooth, NFC varient selon les navigateurs).
- Pas de présence sur les stores (sauf via TWA pour le Play Store).
- Support inégal sur iOS (notifications push supportées depuis iOS 16.4, mais avec des limitations).