Worker

The Worker interface of the Web Workers API represents a background task that can be created via script, which can send messages back to its creator.

Creating a worker is done by calling the Worker("path/to/worker/script") constructor.

Workers may themselves spawn new workers, as long as those workers are hosted at the same origin as the parent page. (Note: nested workers are not yet implemented in WebKit).

Not all interfaces and functions are available to scripts inside a Worker. Workers may use XMLHttpRequest for network communication, but its responseXML and channel attributes are always null. (fetch is also available, with no such restrictions.)

Constructors

Worker()

Creates a dedicated web worker that executes the script at the specified URL. This also works for Blob URLs.

Properties

Inherits properties from its parent, EventTarget.

Event handlers

Worker.onerror

An EventListener called whenever an ErrorEvent of type error event occurs.

Worker.onmessage

An EventListener called whenever a MessageEvent of type message occurs — i.e. when a message is sent to the parent document from the worker via DedicatedWorkerGlobalScope.postMessage. The message is stored in the event's data property.

Worker.onmessageerror

Is an event handler representing the code to be called when the messageerror event is raised.

Methods

Inherits methods from its parent, EventTarget.

Worker.postMessage()

Sends a message — consisting of any JavaScript object — to the worker's inner scope.

Worker.terminate()

Immediately terminates the worker. This does not let worker finish its operations; it is halted at once. ServiceWorker instances do not support this method.

Events

message

Fires when the worker's parent receives a message from that worker. Also available via the onmessage property.

messageerror

Fires when a Worker object receives a message that can't be deserialized. Also available via the onmessageerror property.

rejectionhandled

Fires every time a Promise rejects, regardless of whether or not there is a handler to catch the rejection. Also available through the onrejectionhandled event handler property.

unhandledrejection

Fires when a Promise rejects with no handler to catch the rejection. Also available using the onunhandledrejection event handler property.

Example

The following code snippet creates a Worker object using the Worker() constructor, then uses the worker object:

var myWorker = new Worker('/worker.js');
var first = document.querySelector('input#number1');
var second = document.querySelector('input#number2');

first.onchange = function() {
  myWorker.postMessage([first.value, second.value]);
  console.log('Message posted to worker');
}

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

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
Worker
4
12
3.5
10
10.6
4
4
18
4
11
5
1.0
Worker
4
12
3.5
10
10.6
4
4
18
4
11
5
1.0
message_event
4
12
3.5
10
10.6
4
4
18
4
11.5
5
1.0
messageerror_event
60
18
57
No
47
No
60
60
57
47
No
8.0
onerror
4
12
3.5
10
10.6
4
4
18
4
11
5
1.0
onmessage
4
12
3.5
10
10.6
4
4
18
4
11
5
1.0
onmessageerror
60
18
57
No
47
No
60
60
57
44
No
8.0
postMessage
Yes
12
3.5
10
Internet Explorer does not support Transferable objects.
47
Yes
Yes
Yes
4
44
Yes
Yes
terminate
4
12
3.5
10
10.6
4
4
18
4
11
5
1.0

Support varies for different types of workers. See each worker type's page for specifics.

Cross-origin worker error behavior

In early versions of the spec, loading a cross-origin worker script threw a SecurityError. Nowadays, an error event is thrown instead.

See also

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Worker