SharedWorker: SharedWorker()-Konstruktor

Syntax

new SharedWorker(url)
new SharedWorker(url, name)
new SharedWorker(url, options)

Parameter

url

Ein TrustedScriptURL-Objekt oder eine Zeichenfolge, die die URL des Skripts oder Moduls angibt, das der Worker ausführen soll. Die URL muss denselben Ursprung wie das aufrufende Dokument haben oder eine blob:- bzw. data:-URL sein. Sie wird relativ zum Speicherort der aktuellen HTML-Seite aufgelöst.

name Optional

Eine Zeichenfolge, die einen identifizierenden Namen für den SharedWorkerGlobalScope angibt, der den Gültigkeitsbereich des Workers repräsentiert. Dies ist nützlich, um neue Instanzen desselben SharedWorker zu erstellen und Fehler zu beheben.

options Optional

Ein Objekt mit Optionseigenschaften, die beim Erstellen der Objektinstanz festgelegt werden können. Folgende Eigenschaften sind verfügbar:

type

Eine Zeichenfolge, die den Typ des zu erstellenden Workers angibt. Der Wert kann classic oder module sein. Der Standardwert ist classic.

credentials

Eine Zeichenfolge, die angibt, ob der Browser beim Importieren von Modulen in einen Modul-Worker Anmeldedaten sendet. Zulässig sind dieselben Werte wie für die fetch()-Anfrage: omit, same-origin oder include. Der Standardwert ist same-origin (Anmeldedaten werden nur bei Anfragen mit demselben Ursprung gesendet).

Bei klassischen Workern wird diese Eigenschaft ignoriert.

name

Eine Zeichenfolge, die einen identifizierenden Namen für den SharedWorkerGlobalScope angibt, der den Gültigkeitsbereich des Workers repräsentiert. Dies ist hauptsächlich für die Fehlerbehebung nützlich.

extendedLifetime

Ein boolescher Wert, der angibt, ob der Shared Worker noch für kurze Zeit aktiv bleiben darf, nachdem alle Seiten, die ihn verwenden, verlassen oder geschlossen wurden.

Dadurch können nach dem Verlassen der Seite noch Aufgaben erledigt werden, etwa Zustandsinformationen gespeichert oder Analysedaten an Server gesendet werden. Wie lange der Worker aktiv bleibt, hängt vom Browser ab und kann zwischen 10 Sekunden und 5 Minuten liegen (Chrome verwendet 30 Sekunden).

Weitere Informationen finden Sie unter Lebensdauer von Shared Workern in Web Worker verwenden.

sameSiteCookies

Eine Zeichenfolge, die angibt, welche SameSite-Cookies dem Worker zur Verfügung stehen sollen. Sie kann einen der folgenden beiden Werte haben:

'all'

Dem Worker stehen Cookies mit SameSite=Strict, SameSite=Lax und SameSite=None zur Verfügung. Diese Option wird nur in First-Party-Kontexten unterstützt und ist dort der Standardwert.

'none'

Dem Worker stehen nur Cookies mit SameSite=None zur Verfügung. Diese Option wird in First-Party- und Third-Party-Kontexten unterstützt und ist in Third-Party-Kontexten der Standardwert.

Ausnahmen

SecurityError DOMException

Wird ausgelöst, wenn das Dokument keine Worker starten darf, beispielsweise weil die URL eine ungültige Syntax hat, gegen die Same-Origin-Policy verstoßen wird oder der Wert von sameSiteCookies im gegebenen Kontext nicht unterstützt wird.

NetworkError DOMException

Wird ausgelöst, wenn der MIME-Typ des Worker-Skripts falsch ist. Er sollte immer text/javascript sein (aus historischen Gründen werden möglicherweise andere JavaScript-MIME-Typen akzeptiert).

SyntaxError DOMException

Wird ausgelöst, wenn url nicht geparst werden kann.

TypeError

Wird ausgelöst, wenn der Parameter url eine Zeichenfolge ist, während Trusted Types durch eine CSP erzwungen werden und keine Standardrichtlinie definiert ist.

Beschreibung

Der SharedWorker()-Konstruktor erstellt ein SharedWorker-Objekt, das das klassische Skript oder Modul unter der angegebenen URL ausführt.

Das Skript muss denselben Ursprung wie das zugehörige Dokument haben. Es darf jedoch selbst Skripte oder Module mit einem anderen Ursprung importieren, sofern CORS und andere Einschränkungen dies zulassen. Wird ein Worker mit einem anderen Ursprung benötigt, müssen Sie ihn über einen zwischengeschalteten Worker mit demselben Ursprung oder über einen Blob laden.

Weitere Informationen finden Sie unter Beschreibung beim Worker()-Konstruktor.

Beispiele

Der Kürze halber verwenden die folgenden Beispiele keine Trusted Types. In Produktionscode sollten Sie immer Trusted Types verwenden, wenn Sie Daten, die von Nutzern stammen, an Injection Sinks übergeben.

Ein Beispiel finden Sie unter Trusted Types verwenden in den Beispielen zum Worker()-Konstruktor.

Grundlegende Verwendung

Der folgende Codeausschnitt zeigt, wie mit dem SharedWorker()-Konstruktor ein SharedWorker-Objekt erstellt und anschließend verwendet wird:

const myWorker = new SharedWorker("worker.js");

myWorker.port.start();

[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");
};

Ein vollständiges Beispiel finden Sie unter Einfaches Shared-Worker-Beispiel (Shared Worker ausführen).

Beim Erstellen eines bereits laufenden Workers wird der vorhandene Worker wiederverwendet

Wenn Sie einen neuen Shared Worker mit denselben Optionen wie ein bereits laufender Shared Worker erstellen, wird der vorhandene Shared Worker wiederverwendet.

const worker1 = new SharedWorker("./worker.js");

// This will reuse worker1 for worker2
const worker2 = new SharedWorker("./worker.js");

Einen Shared Worker mit Optionen erstellen

Der folgende Codeausschnitt zeigt, wie mit dem SharedWorker()-Konstruktor und der Option extendedLifetime ein SharedWorker-Objekt erstellt wird.

const worker = new SharedWorker("worker.js", { extendedLifetime: true });

worker.addEventListener("error", (event) => {});

Sofern dies unterstützt wird, bleibt dieser Shared Worker noch für kurze Zeit aktiv, nachdem der Nutzer die Seite verlassen hat.

Shared Worker mit unterschiedlichen Optionen

Dieses Beispiel zeigt, wie Sie Shared Worker mit unterschiedlichen Konstruktoroptionen starten können, indem Sie jedem einen eindeutigen Namen geben.

Zunächst zeigen wir, was passiert, wenn Sie dasselbe Skript und denselben name mit unterschiedlichen Optionen verwenden. Dieser Code würde worker2 error on instantiation: in der Konsole ausgeben, weil eine Instanz die Option extendedLifetime festlegt und die andere nicht. Dasselbe würde passieren, wenn wir unterschiedliche Werte für type oder credentials festlegen würden.

const worker = new SharedWorker("worker.js", { extendedLifetime: true });

// Construct the same shared worker with different options.
const worker2 = new SharedWorker("worker.js");

// Handle constructor errors
worker2.addEventListener("error", (event) => {
  console.log(`worker2 error on instantiation: ${event}`);
});

Der folgende Code erstellt aus demselben Skript einen zweiten Worker, jedoch mit einem anderen Namen und anderen Optionen. Da es sich um unterschiedliche Shared Worker handelt, wird in der Konsole kein Fehler ausgegeben.

const worker = new SharedWorker("worker.js", { extendedLifetime: true });

// Start a second instance of worker.js
const worker2 = new SharedWorker("./worker.js", {
  name: "worker2",
  credentials: "omit",
});

worker2.port.start();

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Die zugehörige Schnittstelle SharedWorker.