Service Worker: Offline-Fähigkeiten und Push für Webseiten

Ein Service Worker ist ein JavaScript-Skript, das der Browser unabhängig von der eigentlichen Webseite im Hintergrund installiert und ausführt. Er arbeitet als Vermittler (Proxy) zwischen der Seite und dem Netzwerk und ist die technische Grundlage für PWA-Funktionen wie Offline-Betrieb, Push-Nachrichten und Hintergrund-Synchronisation.

Wie funktioniert ein Service Worker?

Der Service Worker läuft in einem eigenen Thread und hat keinen direkten Zugriff auf das DOM der Seite. Er bekommt stattdessen Ereignisse wie fetch, install oder activate und kann darauf reagieren — zum Beispiel eine Anfrage aus dem Cache beantworten, statt sie ins Netz zu schicken. Seine Lebensdauer ist nicht an die geöffnete Seite gekoppelt: Der Browser kann ihn beenden und bei Bedarf wieder starten.

// Registrierung in der Webseite
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}

Einsatzgebiete

  • Offline-Fähigkeit: Seiten und Dateien werden vorab in den Cache gelegt und stehen ohne Verbindung zur Verfügung.
  • Push-Benachrichtigungen: Der Worker empfängt Nachrichten des Servers, auch wenn die Seite geschlossen ist.
  • Background Sync: Formulare oder Daten werden gesammelt und später übertragen, sobald das Gerät wieder online ist.
  • Performance: Antworten aus dem Cache sind schneller als jeder Netzwerk-Roundtrip.

Wichtige Regeln

  • Service Worker funktionieren nur über HTTPS (Ausnahme: localhost) — sonst könnte ein Angreifer Skripte einschleusen.
  • Die Lebenszyklen install und activate sollten genutzt werden, um alte Caches aufzuräumen.
  • Bei Updates vergleicht der Browser den Worker mit dem bestehenden Skript und ersetzt ihn nach der Aktivierung.

Verwandte Grundlagen: PWA, Cache, Fetch API, Progressive Enhancement.