有没有办法拦截和禁用默认后台 FCM 通知并在 firebase 消息传递服务工作线程中显示自定义通知

Question

我一直在尝试在用户收到 FCM 后台通知时显示自定义通知，但每次用户收到新通知时我都会收到两个通知，一个是默认的 Firebase SDK，另一个是来自我的服务工作线程代码的自定义通知。

有没有办法禁用默认通知或在出现后立即将其隐藏，以便用户只能收到自定义通知？

我已经尝试了所有以前的解决方案，但它们都不起作用，因为许多函数（例如 SetBackgroundHandler）已被弃用。 如果浏览器处于后台，FCM 推送通知会到达两次

请参阅下面的我的代码 -

self.addEventListener('push', function(event) {
    // console.log('Received a push message', event);
    var body,title,tag,icon;
    messaging.onBackgroundMessage((payload)=>{

    title = payload.notification.title;
     body =  payload.data.order_id;
    icon = "/images/logo.png';
    tag = 'simple-push-demo-notification-tag';
    
     
    event.waitUntil(
      self.registration.showNotification(title, {
        body: body,
        // icon: icon,
        tag: tag,
      })
    );
  });
  });

Answer 1

这个问题困惑了我2天。我阅读了有关 Firebase 消息传递和 Service Worker 的所有信息，现在终于找到了解决方案，所以我很高兴将其写下来。

如果只想看结论的话可以直接跳到最后。

使用chrome的控制台工具，运行

getEventListeners(self).push[0]

在 firebase-messaging-sw.js 上，这个方法可以让我知道 'push' 事件的事件处理程序列表，这应该是 firbase 消息传递使用的机制。我可以通过运行来运行该函数

getEventListeners(self).push[0].listener()

。因为出现了错误，所以我跳转到firebase-messaging.js->sw-controller.ts-> onPush(event: PushEvent)，发现如果来自firebase的消息包含notification属性，那么firebase创建的这个事件处理程序将显示通知。

因此，停止默认通知弹出窗口的简单方法是，不要发送带有 notification 属性的消息。（如果您在firebase项目控制台上测试消息发送，消息将包含通知属性，因此您最好通过其他方式测试发送。）

然后您现在可以通过 onBackgroundMessage() 进行自定义处理。