WorkerGlobalScope — Schnittstelle · JavaScript-Referenz

Signatur

interface WorkerGlobalScope extends EventTarget

Beschreibung

WorkerGlobalScope ist das gemeinsame Basis-Interface für das globale Objekt in Workern. Im Hauptthread ist das globale Objekt window. Im Worker ist es dagegen eine Instanz einer Unterklasse von WorkerGlobalScope, zum Beispiel DedicatedWorkerGlobalScope (normaler Worker), SharedWorkerGlobalScope (SharedWorker) oder ServiceWorkerGlobalScope (Service Worker). Du erreichst es über self oder globalThis.

Das Interface stellt die Funktionen bereit, die in allen Worker-Arten gleich sind. Wichtige Eigenschaften und Methoden:

Eigenschaften: self, location (WorkerLocation), navigator (WorkerNavigator), isSecureContext, crossOriginIsolated, origin, caches, indexedDB, crypto, performance und fonts.
Methoden: importScripts() (lädt Skripte synchron, nur in klassischen Workern), fetch(), setTimeout()/setInterval(), queueMicrotask(), structuredClone(), atob()/btoa(), createImageBitmap() und reportError().
Ereignisse: error, languagechange, offline/online, rejectionhandled und unhandledrejection.

Im Worker gibt es keinen Zugriff auf das DOM: document, window und alert() fehlen. Nachrichten tauschst du mit postMessage() aus. Diese Methode gehört nicht zu WorkerGlobalScope, sondern zu den Unterklassen, etwa DedicatedWorkerGlobalScope. Über self instanceof WorkerGlobalScope kannst du prüfen, ob Code gerade in einem Worker läuft. Das ist nützlich für Bibliotheken, die in beiden Umgebungen funktionieren sollen.

Rückgabewert

Typ

WorkerGlobalScope

Beschreibung

Kann nicht direkt mit new erzeugt werden. Den Browser legt die Instanz beim Start eines Workers an; im Worker ist sie über self erreichbar.

Beispiele

Worker starten und den globalen Gültigkeitsbereich nutzen

// main.js – Hauptthread
const worker = new Worker('worker.js');
worker.addEventListener('message', (e) => console.log('Vom Worker:', e.data));
worker.postMessage({ zahlen: [1, 2, 3, 4] });

// worker.js – self ist hier ein DedicatedWorkerGlobalScope (erbt von WorkerGlobalScope)
self.addEventListener('message', (e) => {
  const summe = e.data.zahlen.reduce((a, b) => a + b, 0);
  self.postMessage({ summe, ort: self.location.pathname });
});

Vom Worker: { summe: 10, ort: '/worker.js' }

Umgebung erkennen: Worker oder Hauptthread?

const imWorker = typeof WorkerGlobalScope !== 'undefined'
  && self instanceof WorkerGlobalScope;

const log = (msg) => {
  if (imWorker) {
    self.postMessage({ typ: 'log', msg });
  } else {
    console.log(msg);
  }
};

log(imWorker ? 'Läuft im Worker' : 'Läuft im Hauptthread');

Läuft im Hauptthread (bzw. Nachricht an den Hauptthread im Worker)

fetch, Fehlerbehandlung und importScripts im Worker

// worker.js (klassischer Worker)
importScripts('https://example.com/libs/helfer.js');

self.addEventListener('unhandledrejection', (e) => {
  console.error('Unbehandelte Promise-Ablehnung:', e.reason);
});

self.addEventListener('message', async (e) => {
  const res = await fetch(e.data.url);
  const daten = await res.json();
  self.postMessage({ anzahl: daten.length, online: self.navigator.onLine });
});

Worker von innen beenden

// worker.js
let ticks = 0;
const id = setInterval(() => {
  ticks++;
  self.postMessage(`Tick ${ticks}`);
  if (ticks === 3) {
    clearInterval(id);
    self.close(); // close() ist in DedicatedWorkerGlobalScope definiert
  }
}, 1000);

Tick 1 Tick 2 Tick 3

// Wichtig · Fallstricke

Kein DOM: document, window, localStorage und alert() gibt es in Workern nicht. Ergebnisse, die das DOM ändern sollen, schickst du per postMessage() an den Hauptthread.
importScripts() funktioniert nur in klassischen Workern. In Modul-Workern (new Worker(url, { type: 'module' })) löst die Methode einen TypeError aus; dort verwendest du import. importScripts() lädt synchron und blockiert den Worker so lange.
Sicherheit: Worker-Skripte unterliegen der Same-Origin-Policy. Skripte, die über importScripts() geladen werden, laufen mit vollen Rechten im Worker, lade sie also nur aus vertrauenswürdigen Quellen. Welche Quellen erlaubt sind, regeln die CSP-Direktiven worker-src bzw. script-src.
postMessage(), close(), onmessage und name gehören zu den Unterklassen (z. B. DedicatedWorkerGlobalScope), nicht zu WorkerGlobalScope selbst.
Manche Eigenschaften gibt es nur in sicheren Kontexten (HTTPS), zum Beispiel caches. crossOriginIsolated ist nur dann true, wenn die Seite mit den Headern COOP und COEP ausgeliefert wird; das ist Voraussetzung für SharedArrayBuffer.
Browser-Unterstützung: Alle modernen Browser unterstützen das Interface. Einzelne Mitglieder wie fonts oder reportError() sind neuer; bei Bedarf vorher auf Unterstützung prüfen.

Siehe auch

Worker WorkletGlobalScope SharedWorkerGlobalScope AudioWorkletGlobalScope PaintWorkletGlobalScope