Flutter Web Firebase 推送通知收到两次

Question

我遇到了大问题，我目前正在开发一个应用程序，我需要将推送通知发送到我的 Web 应用程序（用户必须在其移动设备上安装 PWA）。我们在将应用程序添加到 AppStore(iOS) 时遇到了很多问题，因此我们决定切换到完整的 Web Flutter 开发，因为重新启动该项目是不可行的，因为它已经是一个巨大的项目了。 现在的问题是，我已将 FCM 添加到应用程序中，并且在不同设备上接收通知非常有问题。我已使用 firebaseConfig 添加了 firebase-messaging-sw.js 文件。 问题是我在发送时不断收到 2 个通知（移动设备上也发生同样的情况，这里的边缘仅用于我的电脑上的测试目的）

我的index.html文件包含这个脚本

<script>
   if ('serviceWorker' in navigator) {
      window.addEventListener('load', function () {
        navigator.serviceWorker.register('/firebase-messaging-sw.js');
      });
  }
</script>

在 firebase-messaging-sw.js 文件中，我有这些函数来接收后台消息，并且我添加了这样的Notificationclick事件，因为转发到源=通知窗口对于应用程序正常工作非常重要

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

const firebaseConfig = {
  apiKey: "xxxx",
  authDomain: "xxxxx",
  databaseURL: "xxxx",
  projectId: "xxxxx",
  storageBucket: "xxxx",
  messagingSenderId: "xxxxx",
  appId: "xxxxxx"
};

firebase.initializeApp(firebaseConfig);

const messaging = firebase.messaging();

let darkPatternsValue = 0;

self.addEventListener('message', function(event){
  if (event.data && event.data.type === 'SET_DARK_PATTERNS_VALUE') {
    darkPatternsValue = event.data.value;
  }
});

messaging.onBackgroundMessage(function(payload) {
    console.log('Received background message ', payload);
    if(darkPatternsValue != 1){
      return;
    }
    lastNotificationId = currentNotificationId;

    const notificationTitle = payload.notification.title;
    const notificationOptions = {
        body: payload.notification.body,
      };

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

self.addEventListener('notificationclick', function(event) {
    console.log('Notification clicked ', event);
    event.notification.close();
    event.waitUntil(
        clients.openWindow('/?source=notification')
    );
 });

这是我发送给服务人员的值，用于关闭深色模式的通知

void sendDarkPatternsValue() async {
    html.window.navigator.serviceWorker?.getRegistrations().then((registrations) {
      for (final registration in registrations) {
        registration.active?.postMessage({'type': 'SET_DARK_PATTERNS_VALUE', 'value': 1});
      }
    });
  }

为什么有 2 个 Service Worker 不断在运行，而我明明只添加了 1 个？

普通的一个名为 http://localhost:xxxxxx/ ，第二个名为 http://localhost:xxxxxx/firebase-cloud-messaging-push-scope 。我如何删除 firebase-cloud-messaging-push-scope，因为即使我将 darkPatternsValue 设置为 0，仍然收到 1 个通知，该通知不会触发“notificationclick”事件，当它设置为 1 时，我收到2条通知。但只有第二个触发“notificationclick”事件 这里你可以看到有 2 个 Service Worker，这不应该是这样的。我不知道最上面的那个来自哪里：

在这里您可以在后台服务选项卡中看到通知的接收

Answer 1

您可以在注册新服务人员之前取消注册任何以前的服务人员。这可以通过调用 navigator.serviceWorker.getRegistrations() 然后为每个注册使用 Registration.unregister() 来完成。

if ('serviceWorker' in navigator) {
  window.addEventListener('load', async function () {
    const registrations = await navigator.serviceWorker.getRegistrations();

    for (const registration of registrations) {
      await registration.unregister();
    }

    await navigator.serviceWorker.register('/firebase-messaging-sw.js');
  });
}