What is a Shared Worker? How can multiple browser tabs communicate through one? What are its limitations?

Q: What is a Shared Worker? How can multiple browser tabs communicate through one? What are its limitations?

// main thread const worker = new SharedWorker('shared.js'); worker.port.start(); worker.port.postMessage('Hello'); worker.port.onmessage = (e) => console.log(e.data); // shared.js const ports = []; onconnect = (e) => { const port = e.ports[0]; ports.push(port); port.onmessage = (msg) => ports.forEach(p => p.postMessage(msg.data)); port.start(); };

Difficulty: 7/10

Web Workers, Inter-tab Communication, MessagePort API

A Shared Worker is accessible from multiple tabs/windows with the same origin. Communication uses `ports`. Limitations: same-origin policy, no access to DOM, lifecycle tied to all connections.

Shared Worker usage

Scenario Questions

0-2 years experience

1Imagine we have a dashboard where users can open multiple tabs. We want to use a Shared Worker so that when a user clicks 'refresh' in Tab A, Tab B also gets notified to reload its data. How would you set up the connection in both the tabs and the worker script to pass this message?
2You've written a Shared Worker to share a simple counter across two tabs. It works perfectly in Chrome, but when you open the app in Safari, the counter doesn't sync at all and throws an error. What is likely causing this, and how would you write a fallback so Safari users don't get a broken experience?

Follow-up Questions

How do you inspect and debug console logs or breakpoints inside a running Shared Worker?
What happens to the state inside a Shared Worker if a user closes all tabs of your site and then opens a new one five minutes later?
If your worker script is hosted on a CDN, how do you bypass the same-origin restriction when instantiating the Shared Worker?

What is a Shared Worker? How can multiple browser tabs communicate through one? What are its limitations?

A Shared Worker is accessible from multiple tabs/windows with the same origin. Communication uses ports. Limitations: same-origin policy, no access to DOM, lifecycle tied to all connections.

Scenario Questions

Follow-up Questions

What is a Shared Worker? How can multiple browser tabs communicate through one? What are its limitations?

A Shared Worker is accessible from multiple tabs/windows with the same origin. Communication uses ports. Limitations: same-origin policy, no access to DOM, lifecycle tied to all connections.

Scenario Questions

Follow-up Questions

A Shared Worker is accessible from multiple tabs/windows with the same origin. Communication uses `ports`. Limitations: same-origin policy, no access to DOM, lifecycle tied to all connections.

A Shared Worker is accessible from multiple tabs/windows with the same origin. Communication uses `ports`. Limitations: same-origin policy, no access to DOM, lifecycle tied to all connections.