Worker-Typen im Browser

Browser bieten drei verschiedene Worker-Typen für Hintergrundverarbeitung:

1. Web Worker – Dedizierter Worker für einen Tab
2. Service Worker – Netzwerk-Proxy zwischen App und Server
3. Shared Worker – Geteilter Worker für mehrere Tabs

Vergleichsübersicht

Web Worker

Definition

Dedizierter Worker für rechenintensive Aufgaben, der im Hintergrund-Thread läuft und den Haupt-Thread nicht blockiert.

Anwendungsfälle

• Komplexe Berechnungen
• Datenverarbeitung und Transformation
• Bild- und Videobearbeitung
• Kryptographische Operationen
• Parsing großer Datensätze

Implementierung

// main.js
const worker = new Worker('worker.js');

worker.postMessage({ data: largeDataSet });

worker.onmessage = (event) => {
  console.log('Ergebnis:', event.data);
};

// worker.js
self.onmessage = (event) => {
  const result = processData(event.data);
  self.postMessage(result);
};

Vorteile

• Einfache Implementierung
• Volle Kontrolle über Lebenszyklus
• Keine HTTPS-Anforderung

Nachteile

• Nur für einen Tab
• Keine Netzwerk-Interception
• Keine Push-Benachrichtigungen

Service Worker

Definition

Programmierbarer Netzwerk-Proxy, der zwischen Webanwendung und Netzwerk sitzt. Ermöglicht Offline-Funktionalität, Caching und Push-Benachrichtigungen.

Anwendungsfälle

• Progressive Web Apps (PWA)
• Offline-First-Anwendungen
• Asset-Caching
• API-Response-Caching
• Push-Benachrichtigungen
• Background Sync

Implementierung

// Registration
navigator.serviceWorker.register('/sw.js');

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

Vorteile

• Netzwerk-Interception
• Persistentes Caching
• Push-Benachrichtigungen
• Background Sync
• Kontrolliert alle Tabs im Scope

Nachteile

• HTTPS erforderlich
• Komplexer Lifecycle
• Keine persistenten Verbindungen (WebSocket)
• Kann vom Browser beendet werden

Shared Worker

Definition

Worker, der von mehreren Tabs, Fenstern oder Frames derselben Origin geteilt wird. Ermöglicht Kommunikation und State-Sharing zwischen Tabs.

Anwendungsfälle

• Multi-Tab State-Synchronisation
• Geteilte WebSocket-Verbindung
• Tab-übergreifendes Caching
• Zentrale Datenhaltung
• Ressourcen-Sharing

Implementierung

// main.js (in jedem Tab)
const worker = new SharedWorker('shared-worker.js');
worker.port.start();

worker.port.postMessage({ type: 'subscribe' });

worker.port.onmessage = (event) => {
  console.log('Nachricht:', event.data);
};

// shared-worker.js
const connections = [];

self.onconnect = (event) => {
  const port = event.ports[0];
  connections.push(port);
  
  port.onmessage = (event) => {
    // Broadcast an alle verbundenen Tabs
    connections.forEach(conn => {
      conn.postMessage(event.data);
    });
  };
  
  port.start();
};

Vorteile

• Tab-übergreifende Kommunikation
• Ressourcen-Sharing
• Eine WebSocket-Verbindung für alle Tabs
• Zentraler State

Nachteile

• Eingeschränkte Browser-Unterstützung (~47% global)
• Nicht auf Chrome Android, Safari iOS
• Keine Netzwerk-Interception
• Keine Push-Benachrichtigungen

Browser-Unterstützung Vergleich

Wann welchen Worker wählen?

Web Worker wählen wenn:

• Rechenintensive Operationen im Hintergrund
• Einfache Architektur bevorzugt
• Nur ein Tab betroffen
• Keine HTTPS-Umgebung

Service Worker wählen wenn:

• Offline-Funktionalität erforderlich
• Asset- und API-Caching
• Push-Benachrichtigungen
• PWA-Anforderungen
• Netzwerk-Optimierung

Shared Worker wählen wenn:

• Multi-Tab-Synchronisation
• Geteilte WebSocket-Verbindung
• Desktop-fokussierte Anwendung
• Mobile Unterstützung nicht kritisch

Kombinierte Architektur

Für maximale Performance können alle drei Worker-Typen kombiniert werden:

Kommunikation zwischen Workern

// Service Worker -> Clients (alle Tabs)
self.clients.matchAll().then(clients => {
  clients.forEach(client => {
    client.postMessage({ type: 'update' });
  });
});

// Tab -> Service Worker
navigator.serviceWorker.controller.postMessage({ type: 'sync' });

// Shared Worker <-> Tab
sharedWorker.port.postMessage({ type: 'subscribe' });
sharedWorker.port.onmessage = (event) => { /* ... */ };

Verwandte Themen

• Progressive Web Apps (PWA)
• Cache API
• IndexedDB
• BroadcastChannel API
• MessageChannel
• postMessage API

CFTools Software implementiert Worker-basierte Architekturen für performante Web-Anwendungen.