home

Shared Worker with Central State Management Demo

I'm

This demo connects multiple browser windows to a central background process using a [SharedWorker](https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker). The key idea is a shared state architecture that keeps all windows synchronized—without them needing direct access to each other.

This demo illustrates how multiple browser windows can be orchestrated through a [SharedWorker](https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker) acting as a central data hub. Each window periodically sends its current position to the worker, which stores and manages all incoming data centrally. When one window moves, the worker distributes an update to all others, keeping the state synchronized across views—without any direct reference between the windows.

What makes this approach unique is its integration of **centralized state management** into the SharedWorker model. Unlike other communication methods such as [`postMessage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage), [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage), or [`BroadcastChannel`](https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel), this setup allows the SharedWorker not only to distribute messages but also to **maintain a persistent, coherent state** independently of any individual window. If a window is reloaded or temporarily closed, the overall state remains intact and available.

Open New Window

Worker Code

This code is executed in the SharedWorker context.

Client Code