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

Posted 2023-02-24

【中文标题】有没有办法拦截和禁用默认的后台 FCM 通知并在 firebase 消息传递服务工作者中显示自定义通知

【英文标题】：Is there a way to intercept and disable the default background FCM notification and show custom notification in the firebase messaging service worker

【发布时间】：2021-04-06 06:37:34

【问题描述】：

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

有没有办法禁用默认通知或一出现就隐藏它，以便用户只能获得自定义通知？

我已经尝试了所有以前的解决方案，但它们都没有工作，因为许多功能，如 SetBackgroundHandler 已被弃用。 FCM Push notifications arrive twice if the browser is in background

在下面查看我的代码 -

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,
      )
    );
  );
  );

【问题讨论】：

你找到解决办法了吗？

你找到解决办法了吗？

【参考方案1】：

这个问题让我困惑了 2 天。我阅读了有关 firebase 消息传递和 service worker 的所有信息，现在终于找到了解决方案，所以我很高兴能把它写下来。

如果你只想得到结论，可以跳到最后。

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

getEventListeners(self).push[0]

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

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

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

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

那么你现在可以通过 onBackgroundMessage() 进行自定义处理了。