Shared Workers: One Background Script for Multiple Tabs

Why it exists

Web applications often need to coordinate state or perform background tasks across multiple open tabs or windows for the same site. Without a shared resource, each tab would run its own duplicate logic, wasting resources and making state synchronization complex and error-prone.

The mental model

Think of a SharedWorker as a singleton background service for your web origin. Instead of each browser tab having its own private assistant (a DedicatedWorker), all tabs from your site can talk to the same shared assistant. This is ideal for managing a single resource, like a WebSocket connection, or a shared cache across multiple open pages.

How it works

A script in a tab creates a SharedWorker pointing to a JS file: const myWorker = new SharedWorker('worker.js');. Other tabs from the same origin can connect to this existing worker instance. Each connecting script gets its own unique MessagePort via the worker.port property to communicate. Communication is two-way: scripts use port.postMessage() to send data, and the worker uses the corresponding port to message back. The worker itself runs in a SharedWorkerGlobalScope, separate from any window's main thread.

When to use it

Use a SharedWorker when you need to manage a single, shared state or resource across multiple browsing contexts. Examples include: managing a single WebSocket connection for all open tabs, synchronizing application state between an app and a pop-out window, or centralizing polling for updates to avoid redundant network requests.

When not to use it

Don't use a SharedWorker for tasks that are specific to a single tab. A DedicatedWorker is simpler and more appropriate for offloading work from a single UI thread. Also, be aware that browser support can be inconsistent compared to other worker types. For some offline or advanced caching use cases, a ServiceWorker might be a more robust and widely supported alternative.

One canonical example

Two browser tabs for example.com need to share data. Tab A creates the worker: const myWorker = new SharedWorker('worker.js');. Tab B runs the same code and connects to the existing worker. Both tabs must then get their port (myWorker.port) and, critically, call port.start() to begin sending and receiving messages. The worker script can then manage messages from both tabs, keeping a shared state or relaying messages between them.