使用 onBackgroundMessage() 时，Firebase 网络推送通知被触发两次

Question

我真的不知道这些东西是怎么回事。
我正在为我的网站正常使用 FCM 网络推送。如果我在前台，我可以在网站上收到消息，如果我在后台，我会收到通知。到现在为止还挺好。

importScripts('https://www.gstatic.com/firebasejs/8.2.5/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.2.5/firebase-messaging.js');

firebase.initializeApp({
  ...
});

const messaging = firebase.messaging();

问题是firebase-messaging-sw.js的默认配置在后台显示通知，并显示镶边图标。我希望能够自定义此通知并显示我的应用程序图标。然后在网上阅读我发现我需要用onBackgroundMessage()来拦截消息。

importScripts('https://www.gstatic.com/firebasejs/8.2.5/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.2.5/firebase-messaging.js');

firebase.initializeApp({
  ...
});

const messaging = firebase.messaging();

if (messaging) {
  messaging.onBackgroundMessage(payload => {
    const notificationTitle = payload.notification.title || payload.data.title;
    const notificationOptions = {
      body: payload.notification.body || payload.data.subtitle || '',
      icon: 'https://firebasestorage.googleapis.com/v0/b/yes-4-web.appspot.com/o/pontonos%2Ficons%2Fandroid-chrome-192x192.png?alt=media&token=35616a6b-5e70-43a0-9284-d780793fa076',
      data: payload.data
    };

    return self.registration.showNotification(notificationTitle, notificationOptions);
  });

  self.addEventListener('notificationclick', event => {
    event.notification.close();
    event.waitUntil(clients.matchAll({ type: "window" }).then(function(clientList) {
      for (let i = 0; i < clientList.length; i++) {
        const client = clientList[i];
        if (client.url === '/' && 'focus' in client) {
          if (event.notification.data.route) client.href(event.notification.data.route);
          return client.focus();
        }
      }
      if (clients.openWindow)
        return clients.openWindow(event.notification.data.route || '/');
    }));
  });
}

问题是现在，当使用 onBackgroundMessage() 时，我会看到两个通知，一个是带有 chrome 图标的原始通知，另一个是带有我的应用程序图标的个性化消息(见图)

另一个问题是，如果我点击原始通知，我的网站标签会成为主要焦点，但如果我点击个性化通知，我的网站会打开一个新标签。

Answer 1

这是预期的行为。
github issue