Service Worker应用 多tab页面通信

首先初始化 注册 主线程监听消息 

/* 判断当前浏览器是否支持serviceWorker */
  if ('serviceWorker' in navigator) {
    /* 当页面加载完成就创建一个serviceWorker */
    window.addEventListener('load', function () {
      /* 创建并指定对应的执行内容 */
      /* scope 参数是可选的，可以用来指定你想让 service worker 控制的内容的子目录。在这个例子里，我们指定了 '/'，表示 根网域下的所有内容。这也是默认值。*/
      navigator.serviceWorker.register('/service-worker.js', { scope: './' })
        .then(function (registration) {
        console.log('ServiceWorker registration successful with scope: ', registration.scope);
      })
        .catch(function (err) {
        console.log('ServiceWorker registration failed: ', err);
      });
    });

    // 监听消息
    navigator.serviceWorker.addEventListener('message', function (e) {
      const data = e.data;
      console.log('我接受到消息了：', data);
    });
  }

随便一个事件 触发一下子线程message监听

 navigator.serviceWorker.controller && navigator.serviceWorker.controller.postMessage('测试，传送消息，我发送消息啦。。。');

 下面是  service-worker.js代码    在message监听 使用postMessage给主线程发送发送消息  

// service-worker.js
//安装
self.addEventListener('install', function (event) {
    console.log('install');
    event.waitUntil(self.skipWaiting()); // Activate worker immediately 
    // event.waitUntil(
    //     // 这里可以做一些缓存的操作
    // );
});
//激活
self.addEventListener('activate', function (event) {
    console.log('activate');
    event.waitUntil(self.clients.claim()); // Become available to all pages 
    // event.waitUntil(
    //     // 这里可以做一些清理缓存的操作
    // );
});

self.addEventListener('fetch', function (event) {
    console.log('fetch',event.request.url);
    
});
self.addEventListener('message', (event) => {
    console.log('页面传递过来的数据',event.data) 
    // event.source.postMessage('this message is from sw.js to page');  
    self.clients.matchAll().then(function(clients) {
        clients.forEach(function(client) {
          // 这里的判断目的是过滤掉当前 Tab 页面，也可以使用 visibilityState 的状态来判断
          if(!client.focused) {
            client.postMessage(event.data)
          }
        })
      })
});