javascript - 服务人员 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(

操作系统:Mac
火狐:63.0.3
react js:16.2.0

Answer 1

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

IMO，这是 Firefox 本身关于 Service Worker 而不是 FCM 的错误，但 FCM 肯定会导致问题。

相关的:

https://github.com/firebase/quickstart-js/issues/282 (相同的 FCM 错误)

https://bugzilla.mozilla.org/show_bug.cgi?id=1468935 (相同的 FCM + Firefox 错误，错误修复)

https://bugzilla.mozilla.org/show_bug.cgi?id=1313096 (Firefox 开发团队没有办法在其 Service Worker 测试套件中测试回调，这使得 Firefox 的这一部分很容易出现错误)

https://bugzilla.mozilla.org/show_bug.cgi?id=1489800 (相同的浏览器错误，不同的产品)