javascript - 服务 worker 的推送事件未在多个选项卡中调用

Question

我正在使用Web 推送协议(protocol) 发送推送通知。我已经注册了一个服务 worker 并在一个选项卡中成功订阅了 pushManager。当我发送消息时，推送事件能够接收通知并在控制台中记录消息。

我正在打开相同的 url 并且相同的服务人员正在注册并使用以下代码段返回相同的订阅。

serviceWorkerRegistration.pushManager.getSubscription()

但是当我发送消息时，第一个选项卡只在控制台中记录消息。第二个选项卡不在控制台中记录消息。

当我关闭第一个选项卡并发送消息时，现在我可以在第二个选项卡控制台中看到 service worker 记录的消息。

注意:两个选项卡的加载源相同。示例:https://localhost:8080/WebPush

下面是我的service worker代码

    self.addEventListener('push', function(event) {
      if (event.data) {
         console.log('This push event has data: ', event.data.text());
      } 
      else {
         console.log('This push event has no data.');
      }
   });

同时，当我尝试使用 firebase 时，我可以在两个选项卡中收到消息。

任何人都可以帮助我使用网络推送在两个选项卡上接收消息。

提前致谢。

Answer 1

我找到了一种可能的方法来实现这个用例。

推送事件触发后，使用 service worker 客户端 API，我将找出同一来源的打开客户端的数量，并向所有客户端发送消息。

下面是需要在 Service Worker 中添加内部推送事件的代码片段。

    clients.matchAll({
        type: 'window',
        includeUncontrolled: true
      })
      .then(function(windowClients)
      {   
        windowClients.forEach(function(windowClient){
        windowClient.postMessage({
          message: 'Received a push message.'+event.data.text(),
          time: new Date().toString()
        });
      });

});

并添加一个 service worker 监听器。

    navigator.serviceWorker.addEventListener('message', function(event) {
      console.log('Received a message from service worker: ', event.data);
    });

这将有助于在多个选项卡中接收推送消息。