Enregistrement et cycle de vie d’un Service Worker
Enregistrez un script de Service Worker, comprenez les événements des cycles de vie install, activate et fetch, puis utilisez skipWaiting et clients.claim.
Enregistrement et cycle de vie d’un Service Worker est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce qu'un agent de service ?
Un agent de service est un fichier JavaScript qui s'exécute dans un agent de navigateur distinct, et non dans le fil d'exécution principal, puis intercepte les requêtes réseau destinées à votre origine. Il constitue le moteur des AWP hors connexion, des notifications push et de la synchronisation en arrière-plan.
Enregistrer un agent de service
Enregistrez-le depuis votre script principal. Les agents de service nécessitent HTTPS, sauf sur localhost.
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js', { scope: '/' })
.then(reg => console.log('SW registered:', reg.scope))
.catch(err => console.error('SW registration failed:', err));
});
}Périmètre
Un agent de service contrôle les requêtes situées dans son périmètre (le répertoire depuis lequel il est servi). /sw.js à la racine contrôle tout. Un SW situé dans /app/sw.js contrôle uniquement /app/*.
Cycle de vie : installation → activation → récupération
Trois événements essentiels : install (une seule fois, préparation des caches), activate (une seule fois, nettoyage des anciens caches) et fetch (à chaque requête — décider entre le cache et le réseau).
// sw.js
self.addEventListener('install', (event) => {
console.log('SW installing');
event.waitUntil(
caches.open('v1').then(cache =>
cache.addAll(['/', '/index.html', '/styles.css', '/app.js'])
)
);
});
self.addEventListener('activate', (event) => {
console.log('SW active');
event.waitUntil(
caches.keys().then(keys =>
Promise.all(keys.filter(k => k !== 'v1').map(k => caches.delete(k)))
)
);
});
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then(res => res || fetch(event.request))
);
});skipWaiting()
Par défaut, un SW mis à jour attend la fermeture de tous les onglets avant de s'activer. self.skipWaiting() dans le gestionnaire d'installation force l'activation immédiate — les mises à jour sont plus rapides, mais vous risquez de mélanger d'anciens et de nouveaux fichiers.
self.addEventListener('install', (event) => {
self.skipWaiting(); // activate immediately on next reload
// ... cache setup
});clients.claim()
Après l'activation, un nouveau SW ne contrôle pas les pages qui ont été chargées avant lui. self.clients.claim() dans le gestionnaire d'activation lui donne immédiatement le contrôle.
self.addEventListener('activate', (event) => {
event.waitUntil(self.clients.claim());
});Mettre à jour l'agent de service
Les navigateurs recherchent un nouveau sw.js à chaque navigation (durée maximale de 24 h). Si le contenu du fichier a changé (différent octet par octet), il est installé comme un nouveau SW et attend de s'activer. Rechargez la page pour déclencher l'activation.
Détecter les mises à jour depuis l'application
Écoutez l'événement de détection d'une mise à jour pour afficher une invite de mise à jour.
navigator.serviceWorker.register('/sw.js').then(reg => {
reg.addEventListener('updatefound', () => {
const newSW = reg.installing;
newSW.addEventListener('statechange', () => {
if (newSW.state === 'installed' && navigator.serviceWorker.controller) {
// New version ready
showUpdateBanner(() => {
newSW.postMessage('SKIP_WAITING');
window.location.reload();
});
}
});
});
});Annuler l'enregistrement
Pour arrêter un agent de service qui s'emballe (à la suite d'un problème de développement), annulez son enregistrement.
navigator.serviceWorker.getRegistrations().then(regs => {
for (const reg of regs) reg.unregister();
});DevTools du navigateur
DevTools de Chrome → Application → Agents de service affiche les SW enregistrés, permet d'annuler leur enregistrement, de simuler une mise à jour lors du rechargement et de parcourir les événements du cycle de vie.
Pièges courants
1) Le fichier SW doit se trouver à la racine du périmètre, ou plus haut. 2) HTTPS est obligatoire. 3) Les changements du SW nécessitent un rechargement forcé pendant le développement. 4) Mettez le cache en cache une seule fois, puis mettez-le à jour par versionnement au lieu de le faire croître indéfiniment. 5) Ne mettez pas les requêtes POST en cache (elles ne sont pas prises en charge).
Workbox — la bibliothèque de productivité
La bibliothèque Workbox de Google abstrait le cycle de vie et fournit des stratégies de mise en cache prêtes à l'emploi. La plupart des AWP de production utilisent Workbox plutôt que du code SW écrit manuellement.
Vérification rapide
Que fait self.skipWaiting() dans le gestionnaire install d'un agent de service ?
Récapitulatif : cycle de vie d'un agent de service
Agent JavaScript qui intercepte les requêtes réseau destinées à votre origine. Enregistrez-le avec navigator.serviceWorker.register. Cycle de vie : installation (préparer les caches), activation (nettoyer), récupération (intercepter les requêtes). Utilisez skipWaiting et clients.claim pour des mises à jour immédiates. Écoutez la détection d'une mise à jour pour inviter les utilisateurs à l'installer. Workbox abstrait le code répétitif. HTTPS est obligatoire, sauf sur localhost.
Questions Fréquemment Posées
La leçon « Enregistrement et cycle de vie d’un Service Worker » est-elle gratuite ?
Oui — le texte complet de « Enregistrement et cycle de vie d’un Service Worker » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Enregistrement et cycle de vie d’un Service Worker » ?
Enregistrez un script de Service Worker, comprenez les événements des cycles de vie install, activate et fetch, puis utilisez skipWaiting et clients.claim. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Enregistrement et cycle de vie d’un Service Worker » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?
Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Le manifeste d’application web
- Enregistrement et cycle de vie d’un Service Worker
- Stratégies de mise en cache hors ligne : CacheFirst et NetworkFirst
- Notifications push