javascript - 没有在多个选项卡中调用Service Worker的Push事件

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

我正在打开相同的网址，并且同一服务 worker 正在注册，并使用以下代码段返回相同的订阅。
serviceWorkerRegistration.pushManager.getSubscription()
但是，当我发送消息时，第一个选项卡仅将消息记录在控制台中。第二个选项卡不将消息记录在控制台中。

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

注意:两个选项卡均以相同的原点加载。
示例:https://localhost:8080/WebPush
以下是我的服务人员代码

    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的同时，我可以在两个选项卡中接收消息。

谁能帮我使用Web Push在两个选项卡上接收消息。

提前致谢。

最佳答案

我发现了一种实现此用例的可能方法。

触发推送事件后，使用Service Worker客户端API，我将找出相同来源的打开客户端的数量，并将消息发布到所有客户端。

以下是在service worker中添加push事件内的代码片段。

    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()
        });
      });

});

并添加服务 worker 侦听器。

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

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

关于javascript - 没有在多个选项卡中调用Service Worker的Push事件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44589308/