Définition
Un Service Worker est un script JavaScript qui s'execute en arriere-plan du navigateur, indépendamment de la page web. Il agit comme un proxy programmable entre le navigateur et le réseau, permettant le cache offline, les notifications push et la synchronisation en arriere-plan.
Les Service Workers sont la technologie cle qui rend les PWA (Progressive Web Apps) possibles.
Cycle de vie
- Registration : la page enregistre le Service Worker
- Installation : le SW telecharge et met en cache les ressources
- Activation : le SW prend le contrôle des pages
- Fetch : le SW intercepte les requêtes réseau
// Enregistrement (dans la page)
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js');
}
Cache offline
// sw.js — Installation : pre-cache des ressources essentielles
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open('v1').then((cache) => {
return cache.addAll([
'/',
'/index.html',
'/style.css',
'/app.js',
'/offline.html'
]);
})
);
});
// Fetch : cache-first strategy
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then((cachedResponse) => {
// Retourner le cache si disponible, sinon fetch le reseau
return cachedResponse || fetch(event.request).then((response) => {
// Mettre en cache la nouvelle reponse
const clone = response.clone();
caches.open('v1').then((cache) => cache.put(event.request, clone));
return response;
});
}).catch(() => {
// Fallback offline
return caches.match('/offline.html');
})
);
});
Stratégies de cache
| Stratégie | Description | Cas d'usage |
|---|---|---|
| Cache First | Cache puis réseau | Assets statiques (CSS, JS, images) |
| Network First | Réseau puis cache | API, contenu dynamique |
| Stale While Revalidate | Cache + mise à jour en background | Articles, profils |
| Network Only | Toujours le réseau | Analytics, paiements |
| Cache Only | Toujours le cache | Assets immutables |
Notifications Push
// Demander la permission
const permission = await Notification.requestPermission();
// S'abonner aux push
const subscription = await registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: vapidPublicKey
});
// Dans le Service Worker : recevoir une notification
self.addEventListener('push', (event) => {
const data = event.data.json();
self.registration.showNotification(data.title, {
body: data.message,
icon: '/icon-192.png'
});
});
Limitations
- HTTPS obligatoire (sauf localhost)
- Pas d'accès au DOM (communication via postMessage)
- Peut être termine par le navigateur à tout moment
- Les mises à jour ne sont pas instantanées (cycle de vie)