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 Firefox：63.0.3 reactjs：16.2.0

Answer 1

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

这是IMO，这是Firefox本身的错误，与服务工作者而不是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的这一部分容易出现bug）

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

Answer 2

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

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

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

在单击通知时，在此示例中，它将打开google.com。

服务人员NotificationClick事件未聚焦或在选项卡中打开我的网站

2 个答案: