Definition
Un Service Worker est un script JavaScript qui s'execute en arriere-plan du navigateur, independamment de la page web. Il agit comme un proxy programmable entre le navigateur et le reseau, 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 controle des pages
- Fetch : le SW intercepte les requetes reseau
// 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');
})
);
});
Strategies de cache
| Strategie | Description | Cas d'usage |
|---|---|---|
| Cache First | Cache puis reseau | Assets statiques (CSS, JS, images) |
| Network First | Reseau puis cache | API, contenu dynamique |
| Stale While Revalidate | Cache + mise a jour en background | Articles, profils |
| Network Only | Toujours le reseau | 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'acces au DOM (communication via postMessage)
- Peut etre termine par le navigateur a tout moment
- Les mises a jour ne sont pas instantanees (cycle de vie)