workerable/src/shared-worker.js

A wrapper around SharedWorker to provide a single synced store between browser tabs or windows

const ports = new Set();
let data = null;

function broadcastAll(type, data) {
  ports.forEach(port => {
    port.postMessage([type, data]);
  });
}

function broadcastOther(thisPort, type, data) {
  ports.forEach(port => {
    if (port === thisPort) return;
    port.postMessage([type, data]);
  });
}

function msgHandler(e) {
  const [type, _data] = e.data;
  switch (type) {
    case 'set':
      data = _data;
      broadcastOther(this, 'set', data);
      break;
    case 'init':
      if (ports.size === 0) {
        data = _data;
      }
      break;
    case 'close':
      ports.delete(this);
      break;
    default:
      return;
  }
}

self.addEventListener('connect', function(e) {
  if (!e.ports || !e.ports.length) return;
  const port = e.ports[0];
  port.start();
  port.addEventListener('message', msgHandler);
  ports.add(port);
  if (ports.size > 1) {
    port.postMessage(['set', data]);
  }
});