Service Workers: Die Magie hinter dem Offline-Web

Das Web hatte lange einen fatalen Fehler. Ziehen Sie das Netzwerkkabel (oder gehen Sie in den Keller), und alles ist weg. Der Dino erscheint. Native Apps funktionieren weiter. Sie zeigen alte Inhalte oder sagen "Du bist offline", aber sie stürzen nicht ab.

Service Workers haben das Web repariert. Sie sind programmierbare Netzwerk-Proxies. Ein Stück JavaScript, das zwischen Ihrer Website und dem Internet sitzt. Sie fangen jede Anfrage ab und entscheiden: "Hole ich das Bild aus dem Internet? Oder habe ich es im Cache und liefere es sofort aus?"

Das ermöglicht Websites, die sich "instant" anfühlen und auch ohne Netz funktionieren.

Featured Snippet: Ein Service Worker ist ein Skript, das der Browser im Hintergrund unabhängig von der Webseite ausführt. Er ermöglicht Funktionen, die keine offene Webseite oder Benutzerinteraktion erfordern, wie Offline-Caching, Push-Benachrichtigungen und Background-Sync. Er ist das Herzstück jeder Progressive Web App (PWA).

---

The Cost of Inaction: Der "Lie-fi" Effekt

Jeder kennt "Lie-fi" (Lügen-WLAN). Das Handy zeigt 2 Balken WLAN an, aber es fließen keine Daten. Ohne Service Worker starrt der Nutzer 20 Sekunden auf einen weißen Ladebildschirm, bis der Browser aufgibt (Timeout). Das ist frustrierender als gar kein Netz.

Mit einem Service Worker zeigen Sie sofort (in <50ms) etwas an:

• Die "App Shell" (Kopfzeile, Menü).
• Die Inhalte, die zuletzt geladen wurden.
• Eine freundliche Meldung: "Du bist offline, aber hier ist dein gespeicherter Artikel."

Das hält den Nutzer in der App, statt ihn zum Schließen zu zwingen.

---

Caching-Strategien: Nicht "One Size Fits All"

Wie cachen wir intelligent? Google hat mit der Workbox-Library Standards definiert.

Cache First (Für Assets)

Bilder, Fonts, CSS ändern sich selten.

• Logik: Schau erst in den Cache. Wenn da, nimm es. Wenn nicht, geh ins Netz.
• Vorteil: Maximale Geschwindigkeit.
• Nachteil: Updates dauern länger (bis der Cache invalidiert wird).

Network First (Für News/Preise)

Der Artikel-Text oder der Aktienkurs muss aktuell sein.

• Logik: Versuche, das Netz zu erreichen. Wenn es klappt, nimm die frischen Daten. Wenn es fehlschlägt (Tunnel), zeige die alten Daten aus dem Cache.
• Vorteil: Immer aktuell, aber sicherer Fallback.

Stale-while-revalidate (Der Hybrid)

Das Beste aus beiden Welten (perfekt für Social Feeds).

• Logik: Zeige SOFORT die alten Daten aus dem Cache (Speed). Lade im Hintergrund heimlich die neuen Daten und tausche sie aus, wenn sie da sind.
• Ergebnis: Der Nutzer sieht sofort Inhalt, der sich dann wie von Geisterhand aktualisiert.

---

Der Lifecycle: Installation & Update

Service Worker sind hartnäckig. Wenn sie einmal installiert sind, bleiben sie. Das führt zu dem Problem: "Ich habe deployt, aber die Nutzer sehen die alte Seite!"

Der Update-Tanz:

1. Der Browser merkt: "Ah, die sw.js Datei hat sich bytemäßig geändert."
2. Er installiert den neuen Worker im Hintergrund.
3. Der neue Worker wartet im Status waiting, bis alle Tabs der alten Seite geschlossen sind.
4. Erst dann wird er active.

Tipp: Bauen Sie einen "Update verfügbar"-Toast in Ihre UI ("Neue Version verfügbar – Klicke zum Neuladen"). Wenn der Nutzer klickt, zwingen Sie den Reload (skipWaiting()).

---

Myth-Busting: "Der Browser-Cache reicht doch?"

Nein. Der normale HTTP-Cache (Cache-Control) ist passiv und unzuverlässig. Der Browser löscht ihn, wenn die Festplatte voll ist, nach einer Logik, die Sie nicht kontrollieren ("Least Recently Used"). Der Service Worker Cache (Cache API) ist programmierbar und persistent. Die Daten bleiben dort, bis SIE sagen, dass sie gelöscht werden sollen. Das macht App-ähnliche Verlässlichkeit möglich.

---

Unasked Question: "Was ist Background Sync?"

Ein cooles Feature, das oft vergessen wird. Szenario: Nutzer schreibt im Zug eine Nachricht oder füllt ein Formular aus. Plötzlich Tunnel. Klick auf "Senden". Fehler? Nein. Der Service Worker fängt den Request ab, speichert ihn in der "Sync Queue". Sobald das Handy wieder Netz hat (auch 10 Minuten später, wenn das Handy in der Tasche ist), feuert der Service Worker den Request im Hintergrund ab. Der Nutzer muss nicht warten. "Fire and Forget".

---

FAQ: Service Worker Survival Guide