{{APIRef("Web Workers API")}}
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, {{domxref("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).
Note: In Firefox, shared workers cannot be shared between private (i.e. browsing in a private window) and non-private documents (see {{bug(1177621)}}.)
Properties
Inherits properties from its parent, {{domxref("EventTarget")}}, and implements properties from {{domxref("AbstractWorker")}}.
- {{domxref("AbstractWorker.onerror")}}
- Is an {{ domxref("EventListener") }} that is called whenever an {{domxref("ErrorEvent")}} of type
error
bubbles through the worker. - {{domxref("SharedWorker.port")}} {{readonlyInline}}
- Returns a {{domxref("MessagePort")}} object used to communicate and control the shared worker.
Constructors
- {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}
- Creates a shared web worker that executes the script at the specified URL.
Methods
Inherits methods from its parent, {{domxref("EventTarget")}}, and implements properties from {{domxref("AbstractWorker")}}.
Example
In our Basic shared worker example (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 {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}} constructor. Both scripts contain this:
var myWorker = new SharedWorker("worker.js");
Both scripts then access the worker through a {{domxref("MessagePort")}} object created using the {{domxref("SharedWorker.port")}} property — the port is 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 {{domxref("SharedWorkerGlobalScope.onconnect")}} handler to connect to the same port discussed above. The ports associated with that worker are accessible in the {{event("connect")}} event's ports
property — we then use {{domxref("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.onmessage = function(e) { var workerResult = 'Result: ' + (e.data[0] * e.data[1]); port.postMessage(workerResult); } port.start(); }
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName('HTML WHATWG', "#sharedworker", "SharedWorker")}} | {{Spec2('HTML WHATWG')}} | No change from {{SpecName("Web Workers")}}. |
{{SpecName('Web Workers', "#sharedworker", "SharedWorker")}} | {{Spec2('Web Workers')}} | Initial definition. |
Browser compatibility
{{ CompatibilityTable() }}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Support | {{CompatChrome(4)}} | {{CompatGeckoDesktop(29.0)}} | {{CompatNo}} | {{CompatOpera(10.60)}} | 5, but unsupported as of 6.1 |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | Firefox OS (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Support | {{CompatNo}} | {{ CompatNo() }} | {{CompatGeckoMobile("33.0")}} | 2.1 | {{CompatNo}} | 11.5 | 5.1, but unsupported as of 7.1 |
See also
- {{ domxref("Worker") }}
- Using web workers