service worker notificationclick 事件不聚焦或在选项卡中打开我的网站

Question

我在我的网站上使用 FCM 推送通知，我希望用户在点击推送通知时可以进入我的网站。请注意，用户可能在其他应用程序或其他浏览器选项卡中，我希望当用户收到 fcm 通知时，用户可以通过单击 Firefox 浏览器中的通知来访问我的网站。出于这个原因，我使用了 service worker 中可用的 notificationclick 事件。我使用的代码是这样的：

self.addEventListener('notificationclick', event => {
  console.log('On notification click: ', event.notification.tag);
  event.notification.close();

  // This looks to see if the current is already open and
  // focuses if it is
  event.waitUntil(
    clients
      .matchAll({
        type: 'window'
      })
      .then(clientList => {
        for (let i = 0; i < clientList.length; i++) {
          const client = clientList[i];
          if (client.url === '/' && 'focus' in client) return client.focus();
        }
        if (clients.openWindow) return clients.openWindow('/');
      })
  );
});

它没有打开窗口或专注于我的网站选项卡。为了调试代码，我打印了 clientList 变量，它是一个长度为零的数组。

我在浏览器中得到的错误是这样的

On notification click: 
InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable firebase-messaging-sw.js:92

以上错误是指这行代码：

event.waitUntil(

OS: Mac firefox:63.0.3 reactjs:16.2.0

Answer 1

如果目标是在点击通知时打开特定 URL，可能有更简单的方法。您可以在 FCM 通知负载中发送 "click_action" 字段。

您的有效载荷看起来像这样：

  "notification" : {
    "body" : "Sample body",
    "title" : "Sample title",
    "click_action": "http://google.com"
  }

并且当点击通知时，它会在这个例子中打开google.com。

Answer 2

将 notificationclick 处理程序移到 messaging = firebase.messaging(); 代码行之前。 FCM JS SDK 安装了它自己的全局 notificationclick 处理程序，它的 e.waitUntil() 调用设法（以某种方式）破坏了 Firefox 事件对象。如果您先安装全局处理程序，那么它会先被调用，因此它会真正起作用。但是，它可能会以某种晦涩的方式破坏 FCM 处理程序。

在我看来，这是 Firefox 本身关于 Service Workers 而不是 FCM 的错误，但 FCM 肯定会导致这个问题。

service worker notificationclick 事件不聚焦或在选项卡中打开我的网站

service worker notificationclick event doesn't focus or open my website in tab

javascript

firebase

reactjs

service-worker

service-worker-events