Service Worker

Un Service Worker est un script d'arrière-plan enregistré par le navigateur qui s'exécute indépendamment d'une page web ouverte. Il peut intercepter des requêtes réseau, mettre des données en cache hors ligne et — surtout pour le marketing — recevoir des événements push entrants et afficher des notifications, même si l'onglet du navigateur est fermé.

Qu'est-ce qu'un Service Worker ?

Un Service Worker est un script JavaScript enregistré dans le navigateur qui s'exécute comme un worker, complètement séparé de la page web. Tandis qu'une page web normale se ferme avec l'onglet, le Service Worker continue de tourner en arrière-plan — même sans onglet ouvert. C'est la base technique des Progressive Web Apps (PWA) modernes et le seul moyen de recevoir des notifications push dans le navigateur.

Les Service Workers ont été introduits par Google en 2014 et sont aujourd'hui pris en charge par tous les navigateurs modernes (Chrome, Edge, Firefox, Safari, Samsung Internet, Opera). Ils remplacent l'ancienne API Application Cache, désormais obsolète.

Cycle de vie d'un Service Worker

1. Enregistrement : La page web appelle navigator.serviceWorker.register('/sw.js'). Le navigateur charge le script et l'analyse.
2. Installation : Le Service Worker exécute son événement install. Des ressources sont généralement mises en cache ici.
3. Activation : Après une installation réussie, le navigateur active le Service Worker. Les anciennes versions sont éventuellement désactivées.
4. Inactif / Actif : Le Service Worker est en veille en arrière-plan et n'est réveillé que lorsqu'un événement arrive (Push, Sync, Fetch).
5. Terminaison : Les navigateurs peuvent mettre fin à tout moment aux Service Workers inactifs pour économiser de la mémoire. Le worker redémarre au prochain événement.

Service Worker et notifications push

Pour les notifications push navigateur, le Service Worker est indispensable : c'est le seul récepteur de l'événement push. Dès qu'un message push chiffré arrive du service push, le navigateur réveille le Service Worker et lui remet l'événement :

self.addEventListener('push', event => {
  const data = event.data.json();
  event.waitUntil(
    self.registration.showNotification(data.title, {
      body: data.body,
      icon: data.icon,
      badge: data.badge,
      data: { url: data.url }
    })
  );
});

self.addEventListener('notificationclick', event => {
  event.notification.close();
  event.waitUntil(
    clients.openWindow(event.notification.data.url)
  );
});

La notification système apparaît même si l'onglet du navigateur est fermé. En cliquant dessus, le navigateur ouvre l'URL cible.

Fonctionnalité hors ligne et mise en cache

Une deuxième fonctionnalité principale du Service Worker : l'interception des requêtes réseau via l'événement fetch. Cela permet de rendre les sites web utilisables hors ligne (pattern PWA), en mettant en cache les ressources statiques et les réponses API. Pour les sites web de PME sans ambition applicative, le push est le cas d'usage principal ; les fonctions PWA sont optionnelles.

Obligation HTTPS et scope

Les Service Workers fonctionnent exclusivement via HTTPS (exception : localhost pour le développement). Un Service Worker ne peut intercepter que les requêtes dans son scope — par défaut, le chemin de son fichier. Un Service Worker enregistré sous /sw.js couvre l'ensemble du domaine ; un enregistré sous /blog/sw.js uniquement /blog/*.

Débogage

Chrome DevTools offre sous « Application → Service Workers » un aperçu de tous les workers enregistrés avec leur statut, source, test push et désenregistrement manuel. Firefox a un onglet similaire sous about:debugging. Les événements push peuvent être simulés depuis les DevTools sans avoir à envoyer un vrai message.

Bonnes pratiques pour les PME

• Un fichier Service Worker par domaine. Des workers différents pour des chemins différents conduisent rapidement à un comportement incohérent.
• Éviter la versionnage dans le nom de fichier. Les Service Workers sont identifiés par le navigateur selon leur URL ; avec des suffixes de version, chaque mise à jour doit être ré-enregistrée. Mieux vaut versionner le contenu du fichier (par ex. constantes const SW_VERSION = '1.4').
• Toujours implémenter le handler de clic sur notification, sinon aucune page ne s'ouvre au clic et l'utilisateur est frustré.
• Renouvellement des souscriptions : Les navigateurs peuvent invalider les souscriptions sans préavis. Vérifier à nouveau lors de la prochaine visite du site et ré-enregistrer si nécessaire.

Service Worker avec SendSeven

SendSeven fournit pour le canal push navigateur un Service Worker préconfiguré qui couvre l'ensemble du cycle de vie push (Subscribe, Receive, Click, Unsubscribe). Intégration en une ligne de code, aucune configuration JavaScript propre nécessaire. Ceux qui souhaitent des personnalisations reçoivent le code source du Service Worker et peuvent le forker. Chaque message push est délivré de manière chiffrée via la Web Push API — conforme RGPD, hébergement EU, DPA selon l'art. 28 RGPD.