大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

1. 什么是 Shared Web Worker

Web Worker 是一个在后台独立线程中加载并执行的 JavaScript 文件，普通 Web Worker 与其创建者（即加载该 Worker 的脚本）相关联，即仅限于其创建时所在的选项卡范围，无法与其他选项卡或窗口通信。

Shared Web Worker 是一种更高级的 Web Worker，其允许多个脚本（即使是在不同的窗口、标签页或 iframe 中运行的脚本）与单个 Worker 进行通信，只需要同源即可。这对于需要跨应用程序不同部分协调的任务尤其有用，例如：管理共享数据库连接或维护单个 WebSocket 连接。

Shared Web Worker 遵循与普通 Web Worker 相同的规则，即没有 DOM、文档或页面脚本访问权限，并且对大多数 Window 属性具有有限的只读权限。此外，页面脚本只能与同源 (somesite.com) 的 Shared Web Worker 通信。

目前，Chrome、Safari 和 Opera 浏览器都已经支持 Shared Web Worker。虽然 Shared Web Worker 在一定程度上可以节省资源，但依然会增加额外的复杂性，例如：

• 存在特定浏览器的怪癖，并且调试起来很困难
• 生命周期管理、多页面通信时的状态同步问题、通信协议设计成本增加等潜在提高了开发门槛

开发者可以通过在浏览器中输入 chrome://inspect/#workers 来查看当前域名下所有的 Shared Web Worker 实例。

2. 如何使用 Shared Web Worker

2.1 创建 Shared Worker

创建 Shared Worker 与创建普通 Worker 类似，但有一些关键区别。接下来首先来创建一个简单的 Shared Worker：

首先，为 Shared Worker 创建一个新的 JavaScript 文件，例如 sharedWorker.js：

// sharedWorker.js
// 该数组将保存连接到该 Worker 的所有端口
const connections = [];
// 监听主线程的连接请求
self.onconnect = function (e) {
  const port = e.ports[0];
  connections.push(port);
  // 监听来自连接端口的消息
  port.onmessage = function (event) {
    const message = event.data;
    // 将消息广播到所有连接的端口
    connections.forEach((connPort) => {
      connPort.postMessage(`Message received: ${message}`);
    });
  };
};

接下来创建与 Shared Worker 交互的主脚本：

// main.js
const mySharedWorker = new SharedWorker('sharedWorker.js');
// 访问通信端口
const port = mySharedWorker.port;
// 开始与 Worker 通信
port.start();
// 往 worker 发送一个消息
port.postMessage('Hello from main script!');
// 监听 worker 的消息
port.onmessage = function (e) {
  console.log('Received from Shared Worker:', e.data);
};

需要注意的是，由于同源策略的限制，该脚本必须与创建 Shared Worker 的脚本 (sharedWorker.js) 位于同一域中。

对于普通的 Worker 来说，开发者通常也会遇到同源报错，例如：

Uncaught (in promise) DOMEXception: Failed to construct 'Worker' (...) cannot be accessed from origin (...)

此时可以考虑使用下面方法来绕过：

const type = "application/javascript";
export default (originalWorkerUrl, _options = {}) => {
  const options = {
    skipSameOrigin: true,
    useBlob: true,
    ..._options,
  };
  if (
    !originalWorkerUrl.includes("://") ||
    originalWorkerUrl.includes(window.location.origin)
  ) {
    // 同源直接返回指定的 URL
    return Promise.resolve(originalWorkerUrl);
  }
  // 如果不同源则就先通过 fetch() 把 Worker 的脚本内容拉取下来
  // 对其路径修正，确保其中的 importScripts(...) 能正确引用相对路径的资源
  // 最后生成一个本地可执行的 Blob URL 或 Data URL，用于创建 Worker；
  return new Promise((resolve, reject) =>
    fetch(originalWorkerUrl)
      .then((res) => res.text())
      .then((codeString) => {
        let workerPath = new URL(originalWorkerUrl).href.split("/");
        workerPath.pop();
        const importScriptsFix = `const _importScripts = importScripts;
const _fixImports = (url) => new URL(url, '${workerPath.join("/") +"/"}').href;
importScripts = (...urls) => _importScripts(...urls.map(_fixImports));`;
        let finalURL =
          `data:${type},` + encodeURIComponent(importScriptsFix + codeString);
        if (options.useBlob) {
          finalURL = URL.createObjectURL(
            new Blob([`importScripts("${finalURL}")`], { type })
          );
        }
        resolve(finalURL);
      })
      .catch(reject)
  );
};

当时，该方法并不适用于 Shared Worker，虽然不会报错，但是永远对应于两个不同的 Shared Worker 实例，这一点在 chrome://inspect/#workers 中可以清晰的看到（两个 URL 并不相同）。

2.2 与 Shared Worker 通信

由于 port 的使用，Shared Worker 的通信与专用 Worker 略有不同，每个连接到 Shared Worker 的脚本都会获得自己的 MessagePort 对象。 MessagePort 代表 MessageChannel（React 使用 MessageChannel 做任务执行 ） 的两个端口之一，允许从一个端口发送消息并监听到达另一个端口的消息，用于发送和接收消息。

假设下面有两个不同的脚本，其都使用同一个 Shared Worker：

// script1.js
const worker = new SharedWorker('sharedWorker.js');
const port = worker.port;
port.start();
port.postMessage('Hello from script 1');
port.onmessage = function (e) {
  console.log('Script 1 received:', e.data);
};

// script2.js
const worker = new SharedWorker('sharedWorker.js');
const port = worker.port;
port.start();
port.postMessage('Hello from script 2');
port.onmessage = function (e) {
  console.log('Script 2 received:', e.data);
};

在上面的代码中，两个脚本都会向同一个 Shared Worker 发送消息，然后该 Worker 会将消息广播给所有连接的脚本。

2.3 跨多个页面使用 Shared Worker

接下来创建一个示例，其中使用 Shared Worker 跨多个页面或选项卡同步计数器值，下面是 sharedWorker.js 的代码示例：

let counter = 0;
const connections = [];

self.onconnect = function (e) {
  const port = e.ports[0];
  connections.push(port);

  // 将当前计数器值发送到新连接
  port.postMessage(`Counter value: ${counter}`);

  port.onmessage = function (event) {
    if (event.data === 'increment') {
      counter++;
    } else if (event.data === 'decrement') {
      counter--;
    }
    // 将更新后的计数器值广播到所有连接
    connections.forEach((connPort) => {
      connPort.postMessage(`Counter value: ${counter}`);
    });
  };
};

下面是主脚本（page1.js 和 page2.js）：

const worker = new SharedWorker('sharedWorker.js');
const port = worker.port;

port.start();
port.onmessage = function (e) {
  console.log('Received from Shared Worker:', e.data);
};
// 增加计数器
document.getElementById('incrementButton').addEventListener('click', function () {
  port.postMessage('increment');
});
// 减少计数器
document.getElementById('decrementButton').addEventListener('click', function () {
  port.postMessage('decrement');
});

在上面示例中，两个不同的页面或选项卡可以与同一个 Shared Worker 交互，以增加或减少计数器，而计数器的当前值在所有连接的页面上同步。

3. Shared Worker 有那些典型用例

Shared Worker 在多个脚本需要协调或共享资源的场景中尤其有用，因为来自同一域名下的所有脚本都可以访问同一个 Shared Worker 实例。这使得 Shared Worker 非常适合需要跨多个选项卡或窗口实时更新的任务，例如：协作编辑应用或多选项卡游戏。

• 维护单个 WebSocket 连接：Shared Worker 无需在每个脚本中打开新的 WebSocket 连接，而是可以管理单个连接并通过消息的方式分发给所有连接的脚本。
• 共享状态管理：当多个标签页或 iframe 需要共享状态，例如：用户偏好或身份状态时，Shared Worker 可以管理此状态并在所有连接的脚本之间同步
• 跨标签页通信：Shared Worker 可以促进同一应用不同标签页之间的通信，允许共享数据或同步操作。

值得一提的是，Shared Worker 虽然无法访问 DOM，但是可以基于 fetch 来发送 AJAX 请求甚至 WebSocket 连接来与服务端通信。

参考资料

https://mollify.noroff.dev/content/feu2/javascript-2/module-4/web-workers/working-with-shared-web-workers

https://www.sitepoint.com/javascript-shared-web-workers-html5/

https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers