Question

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

我正在打开相同的网址，同一服务工作人员正在注册并使用以下代码段返回相同的订阅。

serviceWorkerRegistration.pushManager.getSubscription()

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

当我关闭第一个标签并发送消息时，现在我可以看到服务工作者记录的第二个标签控制台中的消息。

注意：两个标签都加载在同一个来源中。示例：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的同时，我可以在两个标签中接收消息。

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

提前致谢。

Answer 1

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

触发推送事件后，使用服务工作者客户端API，我将找到相同来源的开放客户端数量并向所有客户端发布消息。

以下是需要在服务工作者中添加内部推送事件的代码段。

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

});

添加服务工作者监听器。

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

这将有助于在多个标签页中接收推送消息。

Answer 2

服务工作者将响应推送事件一次。这将发生在推送通知产生的线程中。它不会为每个浏览器选项卡启动。事实上，除了任何客户端使用的实例之外，它将是或应该是服务工作者的单独实例。推送通知的客户端是操作系统，如果你愿意，那就是无头客户端。

是的，您将看到记录的控制台消息。我怀疑Chrome的内部有线程寻找第一个打开的客户端，并带有一个控制台来传递这些消息。

我不能代表Chrome，FireFox，Opera，Samsung或Edge采用的实际线程模型，以了解不同的事件响应是如何进行线程化的，但它们在获取，推送和背景方面本质上应该是分开的同步。

我希望这可以帮助你理解这个概念，但你所看到的是我期望看到的，一个控制台记录来自推送的sw线程的消息。

未在多个标签

2 个答案: