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.
Das SharedWorker-Interface steht für eine bestimmte Art von Worker, der von mehreren Browserkontexten, wie etwa mehreren Fenstern oder iframes, genutzt werden kann.
Shared Worker implementieren ein anderes Interface als dedizierte Worker, haben einen anderen globalen Gültigkeitsbereich (SharedWorkerGlobalScope), und ihr Konstruktor ist im DedicatedWorkerGlobalScope nicht verfügbar, daher können sie nicht von dedizierten Workern instanziiert werden.
Hinweis: Wenn auf SharedWorker von mehreren Browserkontexten zugegriffen werden kann, müssen alle diese Browserkontexte denselben Ursprung teilen (dasselbe Protokoll, denselben Host und denselben Port).
Konstruktoren
-
Erstellt einen gemeinsamen Web-Worker, der das Skript an der angegebenen URL ausführt.
Instanz-Eigenschaften
Erbt Eigenschaften von seinem Elternteil, EventTarget.
-
Gibt ein
MessagePort-Objekt zurück, das verwendet wird, um mit dem Shared Worker zu kommunizieren und ihn zu steuern.
Ereignisse
error-
Wird ausgelöst, wenn im Shared Worker ein Fehler auftritt.
Instanz-Methoden
Erbt Methoden von seinem Elternteil, EventTarget.
Beispiel
Grundlegende Verwendung
In unserem Beispiel für einen einfachen Shared Worker (Shared Worker ausführen) haben wir zwei HTML-Seiten, die jeweils JavaScript verwenden, um eine einfache Berechnung durchzuführen. Die verschiedenen Skripte nutzen dasselbe Worker-File, um die Berechnung durchzuführen — beide können darauf zugreifen, auch wenn ihre Seiten in verschiedenen Fenstern ausgeführt werden.
Der folgende Codeausschnitt zeigt die Erstellung eines SharedWorker-Objekts mit dem SharedWorker()-Konstruktor.
Beide Skripte enthalten dies:
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 darauf hält.
Die Konstruktoroption extendedLifetime kann eingestellt werden, um einen Shared Worker für eine kurze Zeit am Leben zu erhalten, nachdem alle Referenzen geschlossen wurden.
Dies ermöglicht dem Worker, Aufräumaufgaben durchzuführen, wie zum Beispiel das Schreiben von Statusinformationen auf Speichermedien oder das Zurücksenden von Analysedaten an Server.
Weitere Informationen finden Sie unter Shared Worker Lebensdauer in Using web workers.
Beide Skripte greifen dann über ein MessagePort-Objekt, das mit der Eigenschaft SharedWorker.port erstellt wurde, auf den Worker zu.
Wenn das onmessage-Ereignis mit addEventListener verbunden ist, wird der Port mit seiner start()-Methode manuell gestartet:
myWorker.port.start();
Wenn der Port gestartet ist, senden beide Skripte Nachrichten an den Worker und verarbeiten Nachrichten, die von ihm gesendet werden, mit port.postMessage() und port.onmessage, jeweils:
Hinweis:
Sie können Entwickler-Tools des Browsers verwenden, um Ihren Shared Worker zu debuggen, indem Sie eine URL in die Adressleiste Ihres Browsers eingeben, um die Entwickler-Tools-Worker-Inspektoren zu öffnen; beispielsweise 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 auf denselben oben besprochenen Port zuzugreifen. Die mit diesem Worker verbundenen Ports sind in der ports-Eigenschaft des connect-Ereignisses zugänglich — wir verwenden dann die start()-Methode von MessagePort, um den Port zu starten, und den onmessage-Handler, um mit Nachrichten umzugehen, die von den Hauptthreads 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 |