未在多個選項卡中調用服務工作者的推送事件

Question

我正在使用Web Push協議發送推送通知。 我已經注冊了一個服務工作者，並在一個選項卡中成功訂閱了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線程的消息。