Service Worker aus HTML registrieren

Ein Service Worker ist eine JavaScript-Datei, die unabhängig von jeder Seite im Hintergrund ausgeführt wird und Netzwerkverbindungen innerhalb seines Gültigkeitsbereichs abfängt. Er ermöglicht Offline-Unterstützung, Push-Benachrichtigungen, Hintergrundsynchronisierung und schnellere wiederholte Ladevorgänge durch Caching.

Registrieren Sie den Worker in einem Seitenskript: navigator.serviceWorker.register("/sw.js"). Der Browser ruft /sw.js ab, analysiert die Datei, führt ihr Installationsereignis aus und beginnt, Anfragen innerhalb des Gültigkeitsbereichs der Registrierung abzufangen.

Ältere Browser unterstützen keine Service Worker. Erkennen Sie die Funktion daher immer mit "serviceWorker" in navigator, bevor Sie register aufrufen; andernfalls löst der Aufruf in Browsern ohne diese API einen Fehler aus. Ein Polyfill ist nicht praktikabel – Service Worker können nicht per Polyfill nachgebildet werden, da sie eine Integration auf Browserebene erfordern.

Der Gültigkeitsbereich ist das Pfadpräfix, das der Worker kontrolliert. Standardmäßig entspricht er dem Verzeichnis der Worker-Datei: /sw.js kontrolliert alle URLs unter /. Um einen Worker mit tieferem Gültigkeitsbereich von einem anderen Dateispeicherort aus zu registrieren, setzen Sie die scope-Option UND stellen Sie den Service-Worker-Allowed-Header bereit.

Legen Sie sw.js im Stammverzeichnis der Anwendung (/sw.js) ab, damit der standardmäßige Gültigkeitsbereich die gesamte Website umfasst. Tiefere Pfade (/app/sw.js) beschränken den Gültigkeitsbereich auf /app/ und darunter, was nur selten gewünscht ist.

Registrieren Sie den Worker nach dem Laden der Seite, damit er beim kritischen Rendern keine Bandbreite beansprucht: window.addEventListener("load", () => navigator.serviceWorker.register("/sw.js")). Die PWA-Funktionen greifen bei späteren Besuchen, ohne den ersten Besuch zu verzögern.

Der Browser prüft automatisch, ob eine aktualisierte Version von sw.js vorhanden ist (normalerweise alle 24 Stunden und bei den meisten Seitenaufrufen). Wenn sich der Dateiinhalt geändert hat, wird der neue Worker heruntergeladen, installiert und wartet im Zustand "waiting", bis alle vorhandenen Tabs geschlossen sind – danach wird er aktiviert.

registration.update() löst manuell eine Aktualisierungsprüfung aus. self.skipWaiting() in der neuen Version von sw.js aktiviert sie sofort, ohne auf das Schließen der Tabs zu warten. Kombinieren Sie beides für das Verhalten "immer den neuesten Worker ausführen" – auf Kosten erneuter Abrufe während einer Sitzung.

registration.unregister() entfernt den Worker. Das ist während der Entwicklung hilfreich, wenn ein fehlerhafter Worker Ihre Website beeinträchtigt. In Chrome DevTools bietet Application → Service Workers zu diesem Zweck beim Debuggen eine Schaltfläche "Unregister".

Die Registrierung eines Workers über HTTP (ohne HTTPS) schlägt stillschweigend fehl – Service Worker erfordern eine sichere Herkunft (HTTPS oder localhost für die Entwicklung). Prüfen Sie die Konsole auf die Meldung "An SSL certificate error occurred", wenn die Registrierung nicht wirksam wird.

Der Worker hat keinen Zugriff auf das DOM. Um Nachrichten zu übertragen, verwenden Sie navigator.serviceWorker.controller.postMessage() auf der Seite und self.addEventListener("message", handler) im Worker (und umgekehrt). Das ist nützlich für Cache-Invalidierung, Versionsprüfungen und benutzerdefinierte Ereignisse.

Beim ersten Besuch wird der Worker installiert und beginnt erst nach dem Neuladen der Seite, Seiten zu kontrollieren. Damit er die erste Navigation sofort kontrolliert, rufen Sie im Activate-Ereignis self.clients.claim() auf – das ist für Offline-First-Apps nützlich.

Warum müssen Service Worker über HTTPS (oder localhost) bereitgestellt werden?

Registrieren Sie Service Worker nach einer Funktionserkennung aus dem Seiten-JavaScript mit navigator.serviceWorker.register("/sw.js"). Legen Sie sw.js für einen vollständigen Gültigkeitsbereich im Stammverzeichnis der Anwendung ab. Registrieren Sie den Worker beim Laden, damit das kritische Rendern nicht beeinträchtigt wird. Aktualisierungen werden regelmäßig automatisch geprüft; erzwingen können Sie sie mit registration.update oder skipWaiting. HTTPS ist erforderlich, um das Einschleusen schädlicher Worker zu verhindern.