时间戳

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

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

问题描述

我一直在尝试在用户收到 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,
      })
    );
  });
  });

标签： javascriptangularpush-notificationfirebase-cloud-messagingservice-worker

解决方案

这个问题困扰了我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() 进行自定义处理。

推荐阅读