The SharedWorker interface represents a specific kind of worker that can be accessed from several browsing contexts, such as several windows, iframes or even workers. They implement an interface different than dedicated workers and have a different global scope, SharedWorkerGlobalScope.
Note: If SharedWorker can be accessed from several browsing contexts, all those browsing contexts must share the exact same origin (same protocol, host and port).
Constructors
SharedWorker()- Creates a shared web worker that executes the script at the specified URL.
Properties
Inherits properties from its parent, EventTarget, and implements properties from AbstractWorker.
AbstractWorker.onerror- Is an
EventListenerthat is called whenever anErrorEventof typeerrorbubbles through the worker. SharedWorker.portRead only- Returns a
MessagePortobject used to communicate with and control the shared worker.
Methods
Inherits methods from its parent, EventTarget, and implements methods from AbstractWorker.
Example
In our Basic shared worker example ([[../../../../../../mdn.github.io/simple-shared-worker/index|run shared worker]]), we have two HTML pages, each of which uses some JavaScript to perform a simple calculation. The different scripts are using the same worker file to perform the calculation — they can both access it, even if their pages are running inside different windows.
The following code snippet shows creation of a SharedWorker object using the SharedWorker() constructor. Both scripts contain this:
var myWorker = new SharedWorker('worker.js');Both scripts then access the worker through a MessagePort object created using the SharedWorker.port property. If the onmessage event is attached using addEventListener, the port is manually started using its start() method:
myWorker.port.start();When the port is started, both scripts post messages to the worker and handle messages sent from it using port.postMessage() and port.onmessage, respectively:
first.onchange = function() {
myWorker.port.postMessage([first.value,second.value]);
console.log('Message posted to worker');
}
second.onchange = function() {
myWorker.port.postMessage([first.value,second.value]);
console.log('Message posted to worker');
}
myWorker.port.onmessage = function(e) {
result1.textContent = e.data;
console.log('Message received from worker');
}Inside the worker we use the SharedWorkerGlobalScope.onconnect handler to connect to the same port discussed above. The ports associated with that worker are accessible in the connect event's ports property — we then use MessagePort start() method to start the port, and the onmessage handler to deal with messages sent from the main threads.
onconnect = function(e) {
var port = e.ports[0];
port.addEventListener('message', function(e) {
var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
port.postMessage(workerResult);
});
port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
}Specifications
| Specification | Status | Comment |
| HTML Living StandardThe definition of 'SharedWorker' in that specification. | Living Standard | No change from Unknown. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
See also
SharedWorker by Mozilla Contributors is licensed under CC-BY-SA 2.5.
