Service Worker

Un Service Worker est un script JavaScript qui s'exécute indépendamment de la page web, agissant comme un proxy programmable entre l'application et le réseau. Cette technologie constitue le fondement des Progressive Web Apps (PWA) en permettant des fonctionnalités avancées comme le fonctionnement hors ligne, la synchronisation en arrière-plan et les notifications push. Contrairement aux scripts classiques, le Service Worker persiste même lorsque la page est fermée.

Fondements

• Thread séparé fonctionnant en arrière-plan, sans accès direct au DOM
• Cycle de vie indépendant (installation, activation, écoute des événements)
• Interception des requêtes réseau via l'API Fetch
• Nécessite obligatoirement HTTPS en production pour des raisons de sécurité

Avantages

• Expérience utilisateur offline : accès au contenu sans connexion internet
• Performance accrue : chargement instantané via le cache local
• Engagement utilisateur : notifications push même application fermée
• Synchronisation en arrière-plan : envoi de données en différé
• Économie de bande passante : réduction des requêtes réseau redondantes

Exemple concret

Voici l'implémentation d'un Service Worker basique avec stratégie de cache "Cache First" :

// Enregistrement du Service Worker
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(reg => console.log('SW enregistré', reg))
    .catch(err => console.error('Erreur SW', err));
}

// Fichier Service Worker (sw.js)
const CACHE_NAME = 'app-v1';
const urlsToCache = [
  '/',
  '/styles/main.css',
  '/script/app.js',
  '/images/logo.png'
];

// Installation
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(urlsToCache))
  );
});

// Interception des requêtes
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        // Cache hit - retourner la réponse
        if (response) return response;
        
        // Sinon fetch et mettre en cache
        return fetch(event.request).then(response => {
          if (!response || response.status !== 200) {
            return response;
          }
          
          const responseToCache = response.clone();
          caches.open(CACHE_NAME)
            .then(cache => {
              cache.put(event.request, responseToCache);
            });
          
          return response;
        });
      })
  );
});

// Activation et nettoyage
self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (cacheName !== CACHE_NAME) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

Mise en œuvre

1. Créer le fichier Service Worker à la racine du domaine (portée maximale)
2. Enregistrer le Service Worker depuis le script principal de l'application
3. Définir la stratégie de cache adaptée (Cache First, Network First, Stale While Revalidate)
4. Implémenter le cycle de vie complet (install, fetch, activate)
5. Gérer les versions et la mise à jour du cache
6. Tester le comportement offline avec Chrome DevTools (onglet Application)
7. Mettre en place un mécanisme de skip waiting pour les mises à jour critiques

Outils associés

• Workbox : bibliothèque Google pour simplifier la création de Service Workers
• Chrome DevTools : débogage et inspection (Application > Service Workers)
• Lighthouse : audit des PWA et vérification du Service Worker
• sw-precache / sw-toolbox : anciennes bibliothèques Google (legacy)
• Service Worker Precache Webpack Plugin : génération automatique du cache
• IndexedDB : stockage local pour données complexes accessible au Service Worker

Les Service Workers transforment les applications web en expériences natives, offrant performance et résilience. Pour les entreprises, cette technologie réduit les coûts de bande passante, améliore la rétention utilisateur et permet de maintenir un service minimal même en cas de défaillance réseau. Investir dans une architecture PWA basée sur les Service Workers garantit un avantage concurrentiel significatif sur les marchés à connectivité limitée.