SharedWorker

What is a SharedWorker?

A SharedWorker is a Web Worker that is shared across all browsing contexts (tabs, windows, iframes) of the same origin. Unlike a Dedicated Worker, which exists only for one page, a SharedWorker lives until all connected tabs close. Think of it as a lightweight in-browser “service” — it can hold shared state, deduplicate network requests, and synchronize data across tabs without a backend.

Key differences from a Dedicated Worker

	Dedicated Worker	SharedWorker
Instance per tab?	Yes — one per page	No — one shared across all tabs
Constructor	new Worker(url)	new SharedWorker(url)
Communication	worker.postMessage direct	worker.port.postMessage via MessagePort
Worker receives connect?	No	Yes — onconnect event fires on each new tab
Lifetime	Tied to the owning page	Until all connected tabs close

The API

There are four key steps to using a SharedWorker.

Step 1 — In the main thread:

const worker = new SharedWorker('shared-worker.js');
worker.port.start();          // must call start() to activate the port
worker.port.postMessage('hello');
worker.port.onmessage = (e) => console.log(e.data);

Step 2 — In the worker (shared-worker.js):

const ports = [];
self.onconnect = (e) => {
  const port = e.ports[0];
  ports.push(port);
  port.start();
  port.onmessage = (ev) => {
    // echo to all connected tabs
    for (const p of ports) p.postMessage('echo: ' + ev.data);
  };
};

Why SharedWorker needs multiple tabs

The real power of SharedWorker is cross-tab shared state. Opening one tab barely demonstrates it — you need at least two. That is why the runnable below opens in StackBlitz, where you can open two browser panes pointing at the same URL.

Runnable: shared counter across tabs (StackBlitz)

SharedWorkerOpen in StackBlitz ▸

// shared-worker.js (runs ONCE, shared by every tab) // var count = 0; // var ports = []; // self.onconnect = function(e) { // var port = e.ports[0]; // ports.push(port); // port.onmessage = function(ev) { // if (ev.data === 'inc') count++; // for (var i = 0; i < ports.length; i++) ports[i].postMessage({ count: count }); // }; // port.start(); // port.postMessage({ count: count }); // }; // main.js (runs in EACH tab) // var worker = new SharedWorker('shared-worker.js'); // worker.port.onmessage = function(e) { console.log('count =', e.data.count); }; // worker.port.start(); // worker.port.postMessage('inc'); // increment from this tab

Needs multiple tabs / a SharedWorker context — open in StackBlitz to run.

🗄️ Key point

A SharedWorker has ONE instance per origin. Every tab that calls new SharedWorker(url) with the same URL connects to the SAME worker. The onconnect event fires once per tab. Call port.start() on BOTH the page and the worker side.

Trade-offs

Option	Benefit	Cost
SharedWorker (one instance for every tab)	Saves memory, shares state and coordination across tabs immediately (e.g. one connection for many tabs)	Harder to debug — DevTools needs a separate panel for the shared worker, and historically iOS Safari didn’t support it or supported it incompletely
Dedicated Worker (one instance per tab)	Supported in every browser, easier to debug since it’s tied to a single page	Uses more memory with many tabs open, and has no built-in shared state

Common mistakes

• Relying on SharedWorker in iOS Safari with no fallback — its support on iOS Safari has historically been inconsistent. Feature-detect with typeof SharedWorker !== 'undefined' and fall back to a Dedicated Worker or another mechanism.
• Forgetting to call port.start() — both the page side and the worker side must call port.start() before messages flow through the MessagePort. Otherwise messages just sit queued and never arrive.
• Expecting onconnect to fire only once — onconnect fires every time a new tab connects. Push each new port onto your existing list instead of overwriting it, or older tabs get disconnected from communication.

🗄️ Real-world example

An app that needs one WebSocket connection shared across every open tab — for example a chat or real-time collaboration tool — can use a SharedWorker to hold that single connection and fan out updates to each tab’s port, cutting the number of server connections and keeping state in sync across tabs. A dashboard or back-office tool with many tabs open at once can use the same pattern to share an auth token and a cached API response across tabs, reducing duplicate requests to the server.

How many SharedWorker instances exist when three tabs on the same origin all call `new SharedWorker('sw.js')`?

Three — one per tab Two — the first tab gets its own One — all tabs connect to the same instance Zero — SharedWorker is not yet supported

Which event fires in the SharedWorker script when a new tab connects?

onmessage onconnect onport onopen

Why must you call `port.start()` in a SharedWorker?

To create the port object To activate the MessagePort so messages are not queued To register the worker with the browser To prevent the worker from terminating

Which prop do you pass to StorageRunner to open a SharedWorker demo in StackBlitz?

inline blob stackblitz shared

Submit

Mark as complete