Chrome中的Firebase Cloud Messaging Service Worker重定向

Question

我有一個Firebase消息傳遞的服務工作者與此監聽器：

self.addEventListener('notificationclick', function(event) {
  const url = dispatchNotification(event.notification.data);
  event.notification.close();
  const appUrl = `${url}`;
  event.waitUntil(clients.matchAll({
          type: 'window',
          includeUncontrolled: true
      }).then( activeClients => {
          if (activeClients.length > 0) {
              activeClients[0].navigate(appUrl).then(client => client.focus());
          } else {
              clients.openWindow(appUrl);
          }
      })
  );
});

在Firefox中，重定向可以正常運行，但是在chrome中，它會引發如下錯誤：

Uncaught (in promise) TypeError: Cannot navigate to URL: http://localhost:4100/urlParams

知道為什么它可以在Firefox中完美工作並在chrome中拋出錯誤嗎？ 本地主機，這是一個安全的網址，因此不能成為ssl限制。

通知顯示正確，唯一的問題是重定向到選項卡。

Answer 1

這是一個老問題，但我會盡力回答。 目前，我只能提供部分答案，並希望能夠在找到完整的解決方案后對您進行更新。

我目前有同樣的問題。 當我將firebase-messaging-sw.js文件用作唯一的服務工作程序並嘗試打開客戶端（就客戶端屬於客戶端API而言）時，它表示它不是客戶端的活動服務工作程序。

Chrome中的控制台屏幕顯示firebase-messaging-sw錯誤

該錯誤可以提示您出了什么問題。

您必須添加自己的定制服務工作者，才能將用戶重定向到正確的視圖。 您可以通過在主JavaScript文件中執行以下操作來做到這一點：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('./sw.js')
           .then(registration => {
             messaging.useServiceWorker(registration);
           })
           .catch(err => console.error(`Error while registering service worker: ${err}`));
}

這是假設您的自定義服務工作者名為sw.js，並且位於域文件夾的根目錄下。

不幸的是，由於我正在嘗試進行自定義推送事件，因此目前無法讓我的服務工作者和firebase-messaging-sw進行通信，但希望這可以幫助您正確地開始工作。

更新資料

我終於讓它正常工作了，但可能無法解決您的問題。 這取決於您擁有哪種架構。 如果您通過Firebase或“單頁應用程序”提供資源，則可能需要與我發現的解決方案不同的解決方案。

就我而言，我有一個多頁應用程序，每個文件都直接從服務器提供。 我在switch語句中有一個錯誤的URL，這意味着該文件從未被“提供”。 當用戶單擊通知時，服務人員找不到正確的頁面，最終總是打開默認頁面。