service-worker-communication.js

async function connectToWindow(listener) {
  const port = await new Promise((resolve) => {
    const handleMessage = (e) => {
      if (e.data.type === "__messaging_connect__") {
        resolve(e.ports[0]);
        self.removeEventListener("message", handleMessage);
      }
    };
    self.addEventListener("message", handleMessage);
  });

  port.onmessage = (e) => listener(e.data);
  return (...args) => port.postMessage(...args);
}

async function connectToWorker(listener) {
  const { port1, port2 } = new MessageChannel();
  const { active: sw } = await navigator.serviceWorker.ready;
  sw.postMessage({ type: "__messaging_connect__" }, [port2]);
  port1.onmessage = (e) => listener(e.data);
  return (...args) => port1.postMessage(...args);
}

/* USAGE:

  const sendToWorker = await connectToWorker(function workerListener() {

  })

  const sendToWindow = await connectToWindow(function windowListener() {
    
  })
*/