Service Worker
Ein Service Worker ist ein JavaScript-Script, das im Hintergrund läuft und Offline-Funktionalität sowie Push-Notifications ermöglicht.
Was ist Service Worker?
Service Worker sind JavaScript-Dateien, die vom Browser im Hintergrund ausgeführt werden - unabhängig von der Webseite selbst. Sie fungieren als Proxy zwischen Browser und Netzwerk und ermöglichen Funktionen, die früher nur nativen Apps vorbehalten waren: Offline-Zugriff, Push-Benachrichtigungen, Background-Sync und intelligentes Caching.
Ausführliche Erklärung
Service Worker sind JavaScript-Dateien, die vom Browser im Hintergrund ausgeführt werden - unabhängig von der Webseite selbst. Sie fungieren als Proxy zwischen Browser und Netzwerk und ermöglichen Funktionen, die früher nur nativen Apps vorbehalten waren: Offline-Zugriff, Push-Benachrichtigungen, Background-Sync und intelligentes Caching.
Die Kernfunktion: Service Worker fangen Netzwerk-Requests ab und entscheiden, ob die Antwort aus dem Cache oder vom Netzwerk kommt. Strategien wie "Cache First" (schnell, auch offline), "Network First" (immer aktuell, Fallback auf Cache) oder "Stale While Revalidate" (Cache sofort, Update im Hintergrund) ermöglichen optimale Nutzererfahrungen.
Service Worker sind die technische Basis für Progressive Web Apps (PWAs). Sie ermöglichen: Offline-Zugriff auf bereits besuchte Seiten, App-Installation auf dem Homescreen, Push-Notifications auch bei geschlossenem Browser, und Background-Sync (Formulare werden gesendet, sobald wieder online). Die Registrierung erfolgt über JavaScript, die Logik lebt in einer separaten SW-Datei.
Ein Service Worker durchläuft einen festen Lebenszyklus: install (Assets werden vorab in den Cache gelegt), activate (alte Caches aufräumen) und danach fetch für jeden Netzwerk-Request im Geltungsbereich. Dieser Scope hängt vom Speicherort der Datei ab - ein Service Worker unter /sw.js kontrolliert die gesamte Domain, einer in einem Unterordner nur dessen Pfad. Zwingende Voraussetzung ist HTTPS (Ausnahme: localhost), da ein Service Worker als Netzwerk-Proxy sonst ein massives Sicherheitsrisiko wäre.
Wichtig zu wissen: Ein Service Worker läuft in einem eigenen Thread ohne Zugriff auf das DOM oder window - die Kommunikation mit der Seite läuft über postMessage. Der Cache wird über die Cache API verwaltet; in der Praxis nimmt einem Googles Bibliothek Workbox das mühsame Handschreiben der Caching-Strategien ab. Eine berüchtigte Falle ist das Update-Verhalten: Ein neuer Service Worker wird erst aktiv, wenn alle Tabs der Seite geschlossen wurden - ohne bewusstes skipWaiting bekommen Nutzer veraltete Versionen serviert, was zu schwer reproduzierbaren Bugs führt. Push-Benachrichtigungen funktionieren nur nach expliziter Nutzererlaubnis und erfordern zusätzlich ein Backend mit VAPID-Schlüsseln. Falsch konfiguriertes Caching kann außerdem dazu führen, dass Nutzer trotz Deployment noch die alte Version sehen - Service Worker sind mächtig, verlangen aber sorgfältiges Versions- und Invalidierungs-Management.
Vorteile & Nutzen
- Offline-Funktionalität für Webseiten
- Deutlich schnellere Ladezeiten durch intelligentes Caching
- Push-Benachrichtigungen wie bei nativen Apps
- Background-Sync für zuverlässige Datenübertragung
Verwandte Begriffe
Möchten Sie Service Worker in Ihrem Projekt einsetzen?
Unser Expertenteam berät Sie gerne, welche Technologien und Ansätze für Ihr konkretes Projekt am besten geeignet sind.