SharedWorker: SharedWorker() constructor

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Warning: This script passed to the url element is executed. APIs like this are known as injection sinks, and are potentially a vector for cross-site scripting (XSS) attacks.

You can mitigate this risk by having a Content Security Policy (CSP) that restricts the locations from which scripts can be loaded, and by always assigning TrustedScriptURL objects instead of strings and enforcing trusted types. See Security considerations in the Worker() constructor for more information.

The SharedWorker() constructor creates a SharedWorker object that executes the script at the specified URL.

Syntax

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

Parameters

url

A TrustedScriptURL object or a string representing the URL of the script or module that the worker will execute. This must be same-origin with the caller's document, or a blob: or data: URL. The URL is resolved relative to the current HTML page's location.

name Optional

A string specifying an identifying name for the SharedWorkerGlobalScope representing the scope of the worker, which is useful for creating new instances of the same SharedWorker and debugging.

options Optional

An object containing option properties that can set when creating the object instance. Available properties are as follows:

type

A string specifying the type of worker to create. The value can be classic or module. The default used is classic.

credentials

A string specifying whether the browser sends credentials when importing modules into a module worker. The allowed values are the same as can be passed to the fetch() request: omit, same-origin, or include. The default is same-origin (only include credentials for same-origin requests).

This is ignored for classic workers.

name

A string specifying an identifying name for the SharedWorkerGlobalScope representing the scope of the worker, which is mainly useful for debugging purposes.

sameSiteCookies

A string indicating which SameSite cookies should be available to the worker. Can have one of the following two values:

'all'

SameSite=Strict, SameSite=Lax, and SameSite=None cookies will all be available to the worker. This option is only supported in first-party contexts, and is the default in first-party contexts.

'none'

Only SameSite=None cookies will be available to the worker. This option is supported in first-party and third-party contexts, and is the default in third-party contexts.

Exceptions

SecurityError DOMException

Thrown if the document is not allowed to start workers, for example if the URL has an invalid syntax or if the same-origin policy is violated, or if the sameSiteCookies value is not supported in the given context.

NetworkError DOMException

Thrown if the MIME type of the worker script is incorrect. It should always be text/javascript (for historical reasons other JavaScript MIME types may be accepted).

SyntaxError DOMException

Thrown if url cannot be parsed.

TypeError

Thrown if the url parameter is a string when Trusted Types are enforced by a CSP and no default policy is defined.

Description

The SharedWorker() constructor creates a SharedWorker object that executes the classic script or module at the specified URL.

The script must be same-origin with the associated document, but may itself import scripts or modules that are cross-origin (if permitted by CORS and other restrictions). If a cross-origin worker is required, users must load it from an intermediate same-origin worker or a blob.

For more information see Description in the Worker() constructor.

Examples

For brevity, the following examples don't use Trusted Types. In production your code should always use trusted types when passing data originating from users into injection sinks.

For an example, see Using Trusted Types in the Worker() constructor examples.

Basic usage

The following code snippet shows creation of a SharedWorker object using the SharedWorker() constructor and subsequent usage of the object:

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

For a full example, see our Basic shared worker example (run shared worker.)

Specifications

Specification
HTML
# dom-sharedworker-dev

Browser compatibility

See also