CFTools Software GmbH - Intelligente Lösungen

Service Worker Definition

Ein Service Worker ist ein ereignisgesteuertes JavaScript-Skript, das der Browser im Hintergrund ausführt, getrennt von der Webseite. Er fungiert als programmierbarer Netzwerk-Proxy zwischen der Webanwendung und dem Netzwerk.

Service Worker ermöglichen:

Abfangen und Modifizieren von Netzwerkanfragen
Caching von Ressourcen für Offline-Nutzung
Hintergrund-Synchronisation
Push-Benachrichtigungen

Kernkonzepte

1. Lifecycle (Lebenszyklus)

Der Service Worker durchläuft einen definierten Lebenszyklus:

Phase	Beschreibung
Registration	Service Worker wird registriert und heruntergeladen
Installation	`install`-Event wird ausgelöst, Ressourcen können gecacht werden
Waiting	Neuer Service Worker wartet, bis alle Tabs geschlossen sind
Activation	`activate`-Event wird ausgelöst, alte Caches können gelöscht werden
Idle	Service Worker wartet auf Events
Terminated	Browser beendet inaktiven Service Worker (wird bei Bedarf neu gestartet)

2. Scope (Geltungsbereich)

Service Worker kontrolliert alle Seiten innerhalb seines Scopes
Standardmäßig ist der Scope das Verzeichnis der Service Worker-Datei
Kann bei Registrierung eingeschränkt werden:

navigator.serviceWorker.register('/sw.js', {
  scope: '/app/'
});

3. Ereignisbasierte Architektur

Service Worker reagieren auf Events:

install – Bei Installation
activate – Bei Aktivierung
fetch – Bei Netzwerkanfragen
push – Bei Push-Nachrichten
sync – Bei Hintergrund-Synchronisation
message – Bei Nachrichten von der Seite

Browser-Unterstützung

Browser	Unterstützung	Seit Version
Chrome	Vollständig	40+
Firefox	Vollständig	44+
Safari	Vollständig	11.1+
Edge	Vollständig	17+
Opera	Vollständig	27+
Chrome Android	Vollständig	40+
Safari iOS	Vollständig	11.3+

Globale Browserabdeckung: ~97% (Stand 2026)

Grundlegende Implementierung

Registrierung

// main.js
if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => {
    try {
      const registration = await navigator.serviceWorker.register('/sw.js');
      console.log('SW registriert:', registration.scope);
    } catch (error) {
      console.error('SW Registrierung fehlgeschlagen:', error);
    }
  });
}

Installation und Caching

// sw.js
const CACHE_NAME = 'app-cache-v1';
const ASSETS = [
  '/',
  '/index.html',
  '/styles.css',
  '/app.js',
];

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then((cache) => cache.addAll(ASSETS))
  );
});

Fetch-Interception

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then((response) => response || fetch(event.request))
  );
});

Caching-Strategien

Strategie	Beschreibung	Anwendungsfall
Cache First	Zuerst Cache prüfen, dann Netzwerk	Statische Assets, Fonts
Network First	Zuerst Netzwerk, bei Fehler Cache	Aktuelle API-Daten
Stale-While-Revalidate	Cache sofort, Netzwerk im Hintergrund	API-Responses, dynamische Inhalte
Cache Only	Nur Cache, kein Netzwerk	Offline-kritische Assets
Network Only	Nur Netzwerk, kein Cache	Analytics, Authentifizierung

Sicherheitsanforderungen

HTTPS erforderlich: Service Worker funktionieren nur über HTTPS
Ausnahme: localhost für Entwicklung
Same-Origin-Policy: Service Worker können nur Ressourcen vom selben Origin cachen

Wichtige Begriffe

Begriff	Beschreibung
Scope	URL-Bereich, den der Service Worker kontrolliert
Clients	Fenster/Tabs, die vom Service Worker kontrolliert werden
skipWaiting()	Überspringt Wartezeit und aktiviert neuen SW sofort
clients.claim()	Übernimmt sofort Kontrolle über alle Clients
Cache API	Browser-API zum Speichern von Request/Response-Paaren
Workbox	Google-Library für Service Worker Entwicklung

Einschränkungen

Kein Zugriff auf DOM
Kein Zugriff auf localStorage/sessionStorage
Asynchron (Promise-basiert)
Wird bei Inaktivität beendet
Keine synchronen XHR-Requests

CFTools Software entwickelt performante Web-Anwendungen mit Service Worker Caching für deutsche Unternehmen.

Was ist ein Service Worker? Definition, Grundlagen und Funktionsweise