Begriff
Service Worker
Warum wichtig?
Dieser Begriff ist ein Knoten im SengakujiWorks-Wissensnetz. Nutze Level 0 für die erste Einordnung, Level 1 für Praxis, Level 2 für technische Struktur und Level 3 für Grenzen, Fallstricke und Expertenkontext.
Dein Browser fragt den Server: "Gib mir style.css".
Normalerweise antwortet der Server.
Ein Service Worker ist ein Man-in-the-Middle, der in deinem Browser lebt.
Er fängt die Anfrage ab.
Er kann sagen: "Halt! Ich habe kein Internet. Aber ich habe style.css gestern gespeichert (Cache). Hier, nimm das!"
Dadurch funktioniert die Webseite offline.
Er läuft auch weiter, wenn du den Tab schließt (für Push-Nachrichten oder Uploads im Hintergrund).
Merksatz: Ein Skript, das der Browser im Hintergrund unabhängig von der Webseite ausführt und das Funktionen wie Offline-Unterstützung (durch Intercepting von Netzwerkanfragen), Push-Benachrichtigungen und Hintergrundsynchronisierung ermöglicht.
Die Strategien ("Caching Strategies"):
- Cache First: Immer den Cache nehmen. Nur wenn leer, das Netz fragen. (Superschnell).
- Network First: Immer das Netz fragen. Nur wenn offline, den Cache nehmen. (Immer aktuell).
- Stale-While-Revalidate: Zeig sofort das alte Bild aus dem Cache (schnell) und lade im Hintergrund das neue Bild für das nächste Mal. (Beste UX).
1. Lebenszyklus
Install -> Activate -> Fetch. Das Update-Problem: Du änderst deinen Code. Der User hat aber noch den alten Service Worker. Der alte Worker lädt weiter den alten Code aus dem Cache. Der User sieht die Änderungen nie. Man muss den Worker zwingen, sich zu updaten ("Skip Waiting"). Eine häufige Fehlerquelle.
2. Kein DOM-Zugriff
Der Worker läuft in einem eigenen Thread. Er sieht die HTML-Seite nicht. Er kann nur Nachrichten (postMessage) an die Seite schicken: "Hey, neue Daten da!"
1. Der Service Worker Lifecycle & "Waiting State" Hell
Das größte Problem für Web-Devs ist der Update-Mechanismus.
Wenn du ein Bundle app.v2.js hochlädst, erkennt der Browser beim Neuladen, dass der Service-Worker-Code serverseitig anders ist. Er installiert den neuen Worker (install Event). Aber: Der neue Worker geht sofort in den Zustand "Waiting". Er übernimmt die Kontrolle erst, wenn alle Tabs der Webseite geschlossen wurden!
Ein einfacher Refresh (F5) reicht nicht aus, um den alten Worker zu töten. Das führt dazu, dass User auf alten Versionen hängen bleiben. Lösung: In der UI einen "Refresh to update"-Button einblenden, der per postMessage das Kommando skipWaiting() an den neuen Worker schickt, gefolgt von einem window.location.reload().
2. Cache API Hierarchien & Cache Poisoning
Der Service Worker kontrolliert die Cache Storage API. Das ist nicht der normale Browser-HTTP-Cache! Der SW steht als Proxy vor dem Netzwerk. Er sieht jeden Request. Ein Risiko ist Cache Poisoning: Wenn ein Hacker Zugriff auf den SW-Code hat (z.B. via XSS), kann er die gecachten Files manipulieren oder permanent bösartige Javascript-Payloads aus dem Cache servieren, die selbst nach einer Server-Bereinigung im Browser des Opfers weiterleben. Deshalb erlaubt der Browser Service Worker nur über HTTPS.
3. Background Sync & Periodic Sync
Ein Service Worker kann Aufgaben erledigen, wenn die Seite gar nicht mehr offen ist.
- Background Sync: Der User drückt "Senden" während er im Tunnel ist. Die App registriert einen
sync-Event. Sobald die Verbindung wieder stabil ist, feuert der Browser den Worker im Hintergrund an, auch wenn das Handy in der Tasche steckt, und verschickt die Daten. - Periodic Background Sync: Erlaubt es News-Apps, morgens um 6:00 Uhr die Artikel der Zeitung herunterzuladen, damit sie beim ersten Öffnen der App am Frühstückstisch bereits ohne Ladezeit (und ohne Internet) da sind. Browser wie Chrome erlauben dies jedoch nur Webseiten, die der User bereits oft genutzt hat ("Site Engagement Score").
Quick-Check
Geht das ohne HTTPS?
Nein (außer auf localhost). Ein Man-in-the-Middle ist zu mächtig. Er könnte alles manipulieren. Deshalb erlaubt der Browser das nur bei sicheren Verbindungen.Was ist Background Sync?
Du schickst eine WhatsApp im Fahrstuhl (kein Netz). Später (draußen) geht sie automatisch raus, auch wenn das Handy in der Tasche ist. Das macht der Service Worker.Wie lösche ich ihn?
In den Chrome DevTools -> Application -> Service Workers -> Unregister. Oder "Cache leeren".