Chrome, HTML5, webdev

Web Workers (Part 3 Out Of 3) – Shared Wrokers

Shared Worker Example

Web Workers - The bookA web worker is a single JavaScript file loaded and executed on a separate thread (=background and not the UI thread). Dedicated web workers are linked to their owner/creator which is the script that called and loaded them. Shared web workers allow any number of scripts to communicate with a single worker.
Btw, if you missed Part1 and/or Part2 of this series, you might want to read them first.
Shared web workers are identified in two ways: either by the URL of the script used to create it or by explicit name. In the code below we will see how it can be done.

<meta charset="utf-8" />
<title>Shared Web Workers: Show And Tale</title>
<h1>Shared Web Workers: Show And Tale</h1>
To create a shared web worker, you pass a JavaScript file name to a
new instance of the SharedWorker object:
<br/>var worker = new SharedWorker("jsworker.js");
<output id="result"></output>
var worker = new SharedWorker('sharedWorker1.js');
worker.port.addEventListener("message", function(e) {
document.getElementById('result').textContent += " | " +;
}, false);
// post a message to the shared web worker
console.log("Calling the worker from script 1");
console.log("Calling the worker from script 2");
// This is the code for: 'sharedWorker1.js' file
// Shared workers that handle the connections and Welcome each new script
var connections = 0; // count active connections
self.addEventListener("connect", function (e) {
var port = e.ports[0];
port.addEventListener("message", function (e) {
port.postMessage("Welcome to " + +
" (On port #" + connections + ")");
}, false);
}, false);

Shared web workers can:

  • load further scripts with importScripts()
  • attach error handlers, and
  • run the port.close() method to prevent further communication on a specific port.

Features Available to Workers

Due to their multi-threaded behavior, web workers only has access to a subset of JavaScript’s features:

  • The navigator object
  • The location object (read-only)
  • XMLHttpRequest
  • setTimeout()/clearTimeout() and setInterval()/clearInterval()
  • The Application Cache
  • Importing external scripts using the importScripts() method
  • Spawning other web workers

Workers do NOT have access to

  • The DOM (it’s not thread-safe)
  • The window object
  • The document object
  • The parent object

Loading External Scripts

You can load external script files or libraries into a worker with the importScripts() function. The method takes zero or more strings representing the filenames for the resources to import. This example loads script1.js and script2.js into the worker: worker.js:


Which can also be written as a single import statement:

importScripts('script1.js', 'script2.js');

you might want to debug your worker with this pattern

var worker = new Worker("worker.js");
worker.onerror = function(e){
  throw new Error(e.message + " (" + e.filename + ":" + e.lineno + ")");

and if you are on Chrome (17+) check this great option under the dev tools:

In case you missed Part1 and/or Part2 of this series – feel free to check them out.

More Sources



3 thoughts on “Web Workers (Part 3 Out Of 3) – Shared Wrokers

  1. Johnny says:

    I dont understand you properly (probably) you say, that standard workers (dedicated) created by new Workers() constructor cannot be accessed from another scripts if they arent creator of worker … It doesn seems be true, since its not important in which script it was created, but it depends on scope in which was created. It will be fantastic if you could make your thoughs clear for me. Thank you in advance.

      • Johnny says:

        I cannot help, but the beggining of article:

        Dedicated web workers are linked to their owner/creator which is the script that called and loaded them. Shared web workers allow any number of scripts to communicate with a single worker.

        is somehow confusing for me, after reading this article, I was curious how you though this and played around, and probably got it. Let me show, what I have found -> By your words you mean, that many scripts (for example even in another tab or so on) can create pseudo instance(s) (something like connector object(s)) of Shared Worker(s) and connect to it (to concrete instance of desired Shared Worker, by the name, or so on) where these rules apply: each instance of Shared Worker share same global context and (and there its little tricky as I am very new to Shared Workers) this instance (I assume in fact its just one instance, of one Shared Worker, there are not many of them, right? ) lives as long as at least one pseudo object (Im still not gonna call them workers as I see them just like communication objects) is alive.

        Sorry for that bloody english, its not my natural language, I dont care about grammer much and my sentences are very unnatural even in my language. Hope you see what I am trying to reveal.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s