Service Worker

Ein Service Worker ist ein vom Browser registriertes Hintergrund-Skript, das unabhängig von einer geöffneten Webseite läuft. Er kann Netzwerk-Requests abfangen, Daten offline cachen und – am wichtigsten für Marketing – eingehende Push-Events empfangen und Benachrichtigungen anzeigen, auch wenn der Browser-Tab geschlossen ist.

Was ist ein Service Worker?

Ein Service Worker ist ein im Browser registriertes JavaScript-Skript, das als Worker völlig getrennt von der Webseite ausgeführt wird. Während eine normale Webseite mit dem Schließen des Tabs beendet wird, läuft der Service Worker im Hintergrund weiter – auch ohne offene Tabs. Er ist die technische Grundlage moderner Progressive Web Apps (PWAs) und der einzige Weg, im Browser Push-Benachrichtigungen zu empfangen.

Service Worker wurden 2014 von Google eingeführt und sind heute in allen modernen Browsern unterstützt (Chrome, Edge, Firefox, Safari, Samsung Internet, Opera). Sie ersetzen die ältere und mittlerweile veraltete Application Cache-API.

Lifecycle eines Service Workers

1. Registrierung: Die Webseite ruft navigator.serviceWorker.register('/sw.js') auf. Der Browser lädt das Skript und parst es.
2. Installation: Der Service Worker führt sein install-Event aus. Üblicherweise werden hier Ressourcen vorgecacht.
3. Aktivierung: Nach erfolgreicher Installation aktiviert der Browser den Service Worker. Alte Versionen werden ggf. ausgeschaltet.
4. Idle / Aktiv: Der Service Worker ruht im Hintergrund und wird nur wieder geweckt, wenn ein Event eintrifft (Push, Sync, Fetch).
5. Terminierung: Browser können inaktive Service Worker jederzeit beenden, um Speicher zu sparen. Beim nächsten Event wird der Worker neu gestartet.

Service Worker und Push-Benachrichtigungen

Für Browser-Push-Benachrichtigungen ist der Service Worker zwingend nötig: Er ist der einzige Empfänger des push-Events. Sobald eine verschlüsselte Push-Nachricht vom Push Service ankommt, weckt der Browser den Service Worker auf und liefert das Event aus:

self.addEventListener('push', event => {
  const data = event.data.json();
  event.waitUntil(
    self.registration.showNotification(data.title, {
      body: data.body,
      icon: data.icon,
      badge: data.badge,
      data: { url: data.url }
    })
  );
});

self.addEventListener('notificationclick', event => {
  event.notification.close();
  event.waitUntil(
    clients.openWindow(event.notification.data.url)
  );
});

Die System-Notification erscheint auch dann, wenn der Browser-Tab geschlossen ist. Klickt der Nutzer darauf, öffnet der Browser die Ziel-URL.

Offline-Funktionalität und Caching

Ein zweites Hauptfeature des Service Workers: das Abfangen von Netzwerk-Requests über das fetch-Event. So lassen sich Webseiten auch offline nutzbar machen (PWA-Pattern), indem statische Ressourcen und API-Antworten gecacht werden. Für KMU-Webseiten ohne App-Anspruch ist Push der Haupt-Anwendungsfall; PWA-Funktionen sind optional.

HTTPS-Pflicht und Scope

Service Worker funktionieren ausschließlich über HTTPS (Ausnahme: localhost für die Entwicklung). Ein Service Worker kann nur Requests innerhalb seines Scopes abfangen – standardmäßig der Pfad seiner Datei. Ein unter /sw.js registrierter Service Worker deckt die gesamte Domain ab; einer unter /blog/sw.js nur /blog/*.

Debugging

Chrome DevTools bieten unter „Application → Service Workers" eine Übersicht aller registrierten Worker mit Status, Quelle, Push-Test und manuellem Unregister. Firefox hat einen ähnlichen Reiter unter about:debugging. Push-Events lassen sich aus den DevTools heraus simulieren, ohne tatsächlich eine Nachricht senden zu müssen.

Best Practice für KMU

• Eine Service-Worker-Datei pro Domain. Verschiedene Worker für verschiedene Pfade führen schnell zu inkonsistentem Verhalten.
• Versionierung im Dateinamen vermeiden. Service Worker werden vom Browser anhand der URL identifiziert; bei Versions-Suffixen muss jedes Update neu registriert werden. Lieber den Inhalt der Datei versionieren (z.B. Konstanten const SW_VERSION = '1.4').
• Notification-Click-Handler immer implementieren, sonst öffnet sich beim Klick keine Seite und der Nutzer ist verärgert.
• Subscription-Renewal: Browser können Subscriptions ohne Vorwarnung invalidieren. Beim nächsten Webseiten-Besuch erneut prüfen und ggf. neu registrieren.

Service Worker mit SendSeven

SendSeven liefert für den Browser-Push-Kanal einen vorkonfigurierten Service Worker, der den kompletten Push-Lifecycle (Subscribe, Receive, Click, Unsubscribe) abdeckt. Einbettung mit einer Code-Zeile, kein eigenes JavaScript-Setup nötig. Wer eigene Anpassungen will, erhält den Quellcode des Service Workers und kann ihn forken. Pro Push-Nachricht wird über die Web Push API verschlüsselt zugestellt – DSGVO-konform, EU-Hosting, AVV nach Art. 28 DSGVO.