SharedWorker
Baseline 2026
Neu verfügbar
*
Seit Mai 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 bestimmte Art von Worker, auf den aus mehreren Browsing-Kontexten, beispielsweise mehreren Fenstern oder iframes, zugegriffen werden kann.
Shared Workers implementieren eine andere Schnittstelle als Dedicated Workers, haben einen anderen globalen Gültigkeitsbereich (SharedWorkerGlobalScope), und ihr Konstruktor ist in DedicatedWorkerGlobalScope nicht verfügbar. Daher können sie nicht aus Dedicated Workers heraus instanziiert werden.
Hinweis: Damit aus mehreren Browsing-Kontexten auf einen SharedWorker zugegriffen werden kann, müssen alle diese Kontexte exakt denselben Origin haben (dasselbe Protokoll, denselben Host und denselben Port).
Konstruktoren
-
Erstellt einen Shared Web Worker, der das Skript unter der angegebenen URL ausführt.
Instanzeigenschaften
Erbt Eigenschaften von der übergeordneten Schnittstelle EventTarget.
-
Gibt ein
MessagePort-Objekt zurück, das zur Kommunikation mit dem Shared Worker und zu dessen Steuerung verwendet wird.
Instanzmethoden
Erbt Methoden von der übergeordneten Schnittstelle EventTarget.
Ereignisse
error-
Wird ausgelöst, wenn im Shared Worker ein Fehler auftritt.
Beispiel
Grundlegende Verwendung
In unserem einfachen Beispiel für einen Shared Worker (Shared Worker ausführen) gibt es zwei HTML-Seiten, die jeweils JavaScript für eine einfache Berechnung verwenden. Die verschiedenen Skripte verwenden dieselbe Worker-Datei für die Berechnung – beide können darauf zugreifen, selbst wenn ihre Seiten in unterschiedlichen Fenstern ausgeführt werden.
Der folgende Codeausschnitt zeigt, wie mit dem Konstruktor SharedWorker() ein SharedWorker-Objekt erstellt wird.
Beide Skripte enthalten Folgendes:
const myWorker = new SharedWorker("worker.js");
Hinweis: Sobald ein Shared Worker erstellt wurde, kann jedes Skript, das auf demselben Origin ausgeführt wird, eine Referenz auf diesen Worker erhalten und mit ihm kommunizieren.
Ein Shared Worker bleibt aktiv, solange eine geöffnete Seite eine Referenz auf ihn hält.
Die Konstruktoroption extendedLifetime kann festgelegt werden, damit ein Shared Worker noch kurze Zeit aktiv bleibt, nachdem alle Referenzen geschlossen wurden.
So kann der Worker Aufräumarbeiten durchführen, beispielsweise Zustandsinformationen in einem Speicher ablegen oder Analysedaten an Server senden.
Weitere Informationen finden Sie unter Lebensdauer eines Shared Workers in Web Worker verwenden.
Anschließend greifen beide Skripte über ein MessagePort-Objekt auf den Worker zu, das über die Eigenschaft SharedWorker.port bereitgestellt wird.
Wenn der onmessage-Event-Handler mit addEventListener registriert wird, muss der Port manuell mit seiner Methode start() gestartet werden:
myWorker.port.start();
Sobald der Port gestartet ist, senden beide Skripte mit port.postMessage() Nachrichten an den Worker und verarbeiten mit port.onmessage die von ihm gesendeten Nachrichten:
Hinweis:
Sie können Ihren SharedWorker mit den Entwicklerwerkzeugen des Browsers debuggen. Geben Sie dazu in die Adressleiste Ihres Browsers eine URL ein, über die Sie die Worker-Ansicht der Entwicklerwerkzeuge erreichen: in Chrome beispielsweise chrome://inspect/#workers und in Firefox 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 eine Verbindung zu dem oben beschriebenen Port herzustellen. Die diesem Worker zugeordneten Ports sind über die Eigenschaft ports des connect-Ereignisses zugänglich. Anschließend starten wir den Port mit der Methode start() von MessagePort und verarbeiten mit dem onmessage-Handler Nachrichten, 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 |