浏览器上的SharedWorker是干啥的？

SharedWorker 是一种在多个标签页、iframe 或者浏览器实例之间共享的后台线程，例如每个页面都有websocket请求，那么相同的页面多tab 打开或iframe嵌套会产生多次websocket请求，如何websocket请求放到shareworker中，接受和发送都由shareworker来中转，那么任意个同域名页面只需要一次websocket请求就好了。

SharedWorker 允许不同的脚本运行在同一个共享的工作线程上，这样它们就能够共享同样的数据连接或者进行通信。

而 ServiceWorker 主要用于实现离线体验、消息推送和后台同步等功能。ServiceWorker 充当了 web 应用程序、浏览器与网络之间的代理服务器。它允许网站拦截和处理网络请求，包括根据网络可用性动态地加载离线页面。

不同点主要包括：

生命周期：ServiceWorker 是长生命周期的，即使标签页关闭了也可存在，直到被明确地终止。而 SharedWorker 仅在至少一个标签页使其处于活动状态时才存在。

用途：SharedWorker 适合做数据共享和脚本通讯，而 ServiceWorker 更适合做资源缓存和离线内容提供。

作用范围：ServiceWorker 可以控制整个域下的多个页面，它与具体页面独立；SharedWorker 则是由创建它的同源页面共同控制。

通信方式：SharedWorker 与页面间的通信依赖于 postMessage 接口；ServiceWorker 的通信则依赖于监听和触发事件。

以下是一个简单的 SharedWorker 示例代码：

SharedWorker 的 JavaScript 文件 testworker.js:

const ports = [];

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

    port.onmessage = (e) => {
        console.log(e.data);
        sendMessage(e.data);
    };
};

// 发送消息
function sendMessage(message) {
    ports.forEach((port) => {
        port.postMessage(message);
    });
}

然后在两个不同的标签页或脚本中使用这个 testworker，例如 page1.html 和 page2.html:

 <script>
var myWorker = new SharedWorker('/asset/testworker.js');
        

// 监听 worker 的消息
myWorker.port.addEventListener('message', function(e) {
  if (e.data instanceof Array) {
    if (e.data[0] === 'result') {
      console.log('Result:', e.data[1]);
    }
  } else {
    console.log('Message from worker:', e.data);
  }
}, false);

// 监听 error 事件
myWorker.port.addEventListener('error', function(e) {
  console.error('Error:', e);
}, false);

// 启动 worker 并发送消息
myWorker.port.start();
myWorker.port.postMessage('Hello from page1');
</script>

 <script>
var myWorker = new SharedWorker('/asset/testworker.js');
        

// 监听 worker 的消息
myWorker.port.addEventListener('message', function(e) {
  if (e.data instanceof Array) {
    if (e.data[0] === 'result') {
      console.log('Result:', e.data[1]);
    }
  } else {
    console.log('Message from worker:', e.data);
  }
}, false);

// 监听 error 事件
myWorker.port.addEventListener('error', function(e) {
  console.error('Error:', e);
}, false);

// 启动 worker 并发送消息
myWorker.port.start();
myWorker.port.postMessage('Hello from page2');
</script>

在这个例子中，无论是 page1.html 或 page2.html 发送信息到 testworker.js，都将通过 SharedWorker 中的端口接收和发送消息。SharedWorker 将会接收消息并且群发到所有页面。

那么如何查看sharedworker中的console.log输出信息呢，浏览器输入：chrome://inspect/#workers