Enregistrer un service worker depuis le HTML

Un agent de service est un fichier JavaScript qui s’exécute en arrière-plan, séparément de toute page, et intercepte les requêtes réseau dans son périmètre. Il permet la prise en charge hors ligne, les notifications push, la synchronisation en arrière-plan et des chargements répétés plus rapides grâce à la mise en cache.

Enregistrez l’agent depuis un script de page : navigator.serviceWorker.register("/sw.js"). Le navigateur récupère /sw.js, l’analyse, exécute son événement d’installation et commence à intercepter les requêtes dans le périmètre de l’enregistrement.

Les anciens navigateurs ne prennent pas en charge les agents de service. Détectez toujours la fonctionnalité avec "serviceWorker" in navigator avant d’appeler register : sinon l’appel lève une exception dans les navigateurs qui ne disposent pas de l’API. Ajouter un polyfill n’est pas viable : les agents de service ne peuvent pas être simulés de cette manière, car ils nécessitent une intégration au niveau du navigateur.

Le périmètre est le préfixe de chemin contrôlé par l’agent. Par défaut, il correspond au répertoire du fichier de l’agent : /sw.js contrôle toutes les URL sous /. Pour enregistrer un agent dont le périmètre est plus profond depuis un autre emplacement de fichier, définissez l’option de périmètre AND servez l’en-tête Service-Worker-Allowed.

Placez sw.js à la racine de l’application (/sw.js) afin que son périmètre par défaut couvre tout le site. Les chemins plus profonds, comme /app/sw.js, limitent le périmètre à /app/ et à ses sous-chemins, ce qui est rarement souhaitable.

Enregistrez l’agent après le chargement de la page pour éviter qu’il ne concurrence la bande passante pendant le rendu critique : window.addEventListener("load", () => navigator.serviceWorker.register("/sw.js")). Les fonctionnalités de la PWA deviennent actives lors des visites suivantes sans retarder la première visite.

Le navigateur recherche automatiquement une version mise à jour de sw.js, généralement toutes les 24 heures et lors de la plupart des chargements de page. Si le contenu du fichier a changé, le nouvel agent est téléchargé et installé, puis attend dans l’état « waiting » jusqu’à la fermeture de tous les onglets existants ; il s’active ensuite.

registration.update() déclenche manuellement une vérification des mises à jour. self.skipWaiting() dans le nouveau sw.js l’active immédiatement, sans attendre la fermeture des onglets. Combinez-les pour obtenir un comportement où la dernière version de l’agent est toujours utilisée, au prix de nouveaux téléchargements en cours de session.

registration.unregister() supprime l’agent. Cette opération est utile pendant le développement si un agent défectueux perturbe votre site. Dans Chrome DevTools, Application → Service Workers propose un bouton « Unregister » ayant le même objectif pendant le débogage.

Enregistrer un agent via HTTP, sans HTTPS, échoue silencieusement : les agents de service nécessitent une origine sécurisée, c’est-à-dire HTTPS ou localhost pour le développement. Consultez la console pour vérifier le message « Une erreur de certificat SSL s’est produite » si l’enregistrement ne prend pas effet.

L’agent n’a pas accès au DOM. Pour échanger des messages, utilisez navigator.serviceWorker.controller.postMessage() depuis la page et self.addEventListener("message", handler) dans l’agent, et inversement. Cette méthode est utile pour invalider le cache, vérifier les versions et gérer des événements personnalisés.

Lors de la première visite, l’agent s’installe et ne commence à contrôler les pages qu’après le rechargement de la page. Pour contrôler immédiatement la première navigation, appelez self.clients.claim() dans l’événement d’activation : cette méthode est utile pour les applications conçues d’abord pour le mode hors ligne.

Enregistrez les agents de service depuis le JS de la page avec navigator.serviceWorker.register("/sw.js") après avoir détecté la fonctionnalité. Placez sw.js à la racine de l’application pour couvrir tout le périmètre. Effectuez l’enregistrement au chargement afin d’éviter de concurrencer le rendu critique. Les mises à jour sont vérifiées automatiquement à intervalles réguliers ; forcez-les avec registration.update ou skipWaiting. HTTPS est requis pour empêcher l’injection d’un agent malveillant.