SharedWorker
Baseline
2026
*
Neu verfügbar
Seit May 2026 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
Die SharedWorker-Schnittstelle repräsentiert eine spezielle Art von Worker, auf die von mehreren Browsing-Kontexten, wie mehreren Fenstern oder iframes, zugegriffen werden kann. Shared Worker implementieren eine andere Schnittstelle als dedizierte Worker, haben einen anderen globalen Gültigkeitsbereich (SharedWorkerGlobalScope) und ihr Konstruktor ist im DedicatedWorkerGlobalScope nicht verfügbar, sodass sie nicht von dedizierten Workern instanziiert werden können.
Hinweis: Wenn auf SharedWorker von mehreren Browsing-Kontexten zugegriffen werden kann, müssen all diese Browsing-Kontexte den exakt gleichen Ursprung teilen (gleiches Protokoll, Host und Port).
Konstruktoren
-
Erstellt einen Shared Web Worker, der das Skript unter der angegebenen URL ausführt.
Instanzeigenschaften
Erbt Eigenschaften von seinem Elternteil, EventTarget.
-
Gibt ein
MessagePort-Objekt zurück, das zur Kommunikation und Steuerung des Shared Workers verwendet wird.
Ereignisse
error-
Wird ausgelöst, wenn ein Fehler im Shared Worker auftritt.
Instanzmethoden
Erbt Methoden von seinem Elternteil, EventTarget.
Beispiel
Grundlegende Verwendung
In unserem Grundlegenden Shared Worker Beispiel (Shared Worker ausführen), haben wir zwei HTML-Seiten, die jeweils mithilfe von JavaScript eine einfache Berechnung durchführen. Die verschiedenen Skripte verwenden die gleiche Worker-Datei, um die Berechnung durchzuführen – sie können beide darauf zugreifen, selbst wenn ihre Seiten in unterschiedlichen Fenstern laufen.
Der folgende Codeausschnitt zeigt die Erstellung eines SharedWorker-Objekts unter Verwendung des SharedWorker()-Konstruktors. Beide Skripte enthalten Folgendes:
const myWorker = new SharedWorker("worker.js");
Hinweis: Sobald ein Shared Worker erstellt wurde, kann jedes Skript, das im gleichen Ursprung ausgeführt wird, eine Referenz zu diesem Worker erhalten und mit ihm kommunizieren.
Ein Shared Worker bleibt so lange aktiv, wie eine offene Seite eine Referenz zu ihm hält. Die extendedLifetime-Konstruktoroption kann gesetzt werden, um einen Shared Worker für eine kurze Zeit am Leben zu halten, nachdem alle Referenzen geschlossen wurden. Dies ermöglicht es dem Worker, Aufräumaufgaben auszuführen, wie das Speichern von Zustandsinformationen oder das Senden von Analysedaten an Server. Weitere Informationen finden Sie unter Lebensdauer des Shared Workers in Verwendung von Web Workern.
Beide Skripte greifen dann über ein MessagePort-Objekt auf den Worker zu, das mit der SharedWorker.port-Eigenschaft erstellt wurde. Wenn das onmessage-Ereignis mit addEventListener angebunden wird, wird der Port manuell mit seiner start()-Methode gestartet:
myWorker.port.start();
Wenn der Port gestartet ist, senden beide Skripte Nachrichten an den Worker und bearbeiten Nachrichten, die von ihm gesendet werden, mit port.postMessage() und port.onmessage:
Hinweis:
Sie können die Browser-Entwicklungstools nutzen, um Ihren SharedWorker zu debuggen, indem Sie eine URL in die Adressleiste Ihres Browsers eingeben, um den Entwicklungswerkzeugarbeiter-Inspektor zu öffnen; zum Beispiel in Chrome die URL chrome://inspect/#workers, und in Firefox die URL about:debugging#workers.
[first, second].forEach((input) => {
input.onchange = () => {
myWorker.port.postMessage([first.value, second.value]);
console.log("Message posted to worker");
};
});
myWorker.port.onmessage = (e) => {
result1.textContent = e.data;
console.log("Message received from worker");
};
Innerhalb des Workers verwenden wir den onconnect-Handler, um uns mit dem oben diskutierten Port zu verbinden. Die mit diesem Worker verbundenen Ports sind über die ports-Eigenschaft des connect-Ereignisses zugänglich – wir verwenden dann die MessagePort-start()-Methode, um den Port zu starten, und den onmessage-Handler, um Nachrichten zu verarbeiten, die von den Haupt-Threads gesendet werden.
onconnect = (e) => {
const port = e.ports[0];
port.addEventListener("message", (e) => {
const workerResult = `Result: ${e.data[0] * e.data[1]}`;
port.postMessage(workerResult);
});
port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
};
Spezifikationen
| Spezifikation |
|---|
| HTML # shared-workers-and-the-sharedworker-interface |