| name | PWA Service Worker Manager |
| description | Gère les mises à jour du Service Worker de manière sécurisée avec versioning du cache et tests offline. Utiliser lors de modifications du SW, ajout de ressources, ou changements de stratégie de cache |
PWA Service Worker Manager
Gère Service Worker pour offline play et cache versioning sécurisé.
Quand utiliser
- Modification Service Worker
- Ajout ressources à cacher
- Changement stratégie cache
- Tests offline
- Correction bugs SW
Scripts essentiels
npm run test:pwa-offline # Tester offline (PRINCIPAL)
npm run sw:disable # Désactiver SW
npm run sw:fix # Réparer SW
Versioning et workflow
SemVer (voir sw.js) :
- Major : Changements cassants
- Minor : Ressources ajoutées
- Patch : Corrections
Workflow :
- Modifier : sw.js (version, ressources, handlers)
- Incrémenter : Version (SemVer)
- Tester :
npm run test:pwa-offline - Vérifier : DevTools App tab (Offline mode)
- Quality : format:check, lint, test
Stratégies de cache
- Cache First : Assets (HTML, CSS, JS, images)
- Network First : APIs (données fraîches)
- Cache Only : Assets immuables
- Network Only : Analytics, auth
Trouve stratégie dans sw.js existant.
Événements SW clés
- Install : Créer cache, skipWaiting()
- Activate : Nettoyer anciens caches, clients.claim()
- Fetch : Appliquer stratégie, gérer erreurs
Debugging
Chrome DevTools (F12) → Application → Service Workers :
- Offline mode → Tester navigation
- caches.keys() en console → Vérifier caches
Problèmes courants :
- SW ne s'update → Incrémenter version, skipWaiting() présent
- Ressources manquantes → Ajouter à liste cache
- Cache volumineux → Cacher uniquement ressources critiques
Checklist
- Version incrémentée (SemVer)
- skipWaiting() + clients.claim() présents
- Nettoyage anciens caches
- Offline test OK (
npm run test:pwa-offline) - DevTools Offline mode OK
- format:check, lint, test passent
En cas de doute
Règles absolues :
- Incrémenter version TOUJOURS
- Tester offline AVANT commit
- DevTools Application tab verification
npm run test:pwa-offlinedoit passer- skipWaiting() + clients.claim() essentiels
Références :
sw.js- Service Worker principalmanifest.json- PWA manifest- Chrome DevTools Application tab