Firebase Web推送通知合并问题：如何按属性合并堆叠通知？

嘿，这个问题我太熟了——Firebase推送通知堆叠确实挺闹心的，不过咱们完全可以通过Service Worker里的逻辑，基于某个共同属性（比如自定义标签、通知类别，甚至你自己定义的业务字段）把多条通知合并成一条，再也不用面对一堆通知占满通知栏的情况了！

下面分两种常见场景给你具体方案：

场景1：你能控制推送的Payload内容 #

这种情况最简单，直接利用浏览器Notification API的tag属性就行——同一个tag的通知会自动替换旧的，而不是堆叠显示。

具体操作： #

在发送推送的时候，给notification对象加上tag字段，比如你要合并所有“未读消息”类的通知，就统一用unread-messages作为tag：

// 后端发送推送的示例代码（用Firebase Admin SDK）
const message = {
  notification: {
    title: "新消息提醒",
    body: "你有1条未读消息",
    tag: "unread-messages" // 这个tag就是合并的核心标识
  },
  data: {
    count: 1 // 可选，用来累计数量
  },
  token: "用户的设备Token"
};

admin.messaging().send(message);

如果后续再发送同tag的推送，新通知会直接替换掉旧的。要是想显示累计数量，就把count放在data字段里，在Service Worker里更新通知内容就行。

场景2：没法修改推送Payload，只能在Service Worker里处理 #

如果推送是第三方发送的，或者你没法改后端逻辑，那就在Service Worker的push事件里手动处理合并：

核心思路： #

1. 监听push事件，解析推送的payload；
2. 根据你指定的属性（比如自定义数据里的标识字段）获取现有同类型的通知；
3. 累加通知数量，关闭旧通知；
4. 显示合并后的新通知。

代码示例： #

self.addEventListener('push', function(event) {
  const payload = event.data ? event.data.json() : {};
  // 这里用自定义数据里的notificationTag作为合并标识，没有的话用默认值
  const mergeTag = payload.data?.notificationTag || 'default-merge-tag';
  
  // 初始化新通知的基础内容
  let newNotification = {
    title: payload.notification.title,
    body: payload.notification.body,
    tag: mergeTag,
    data: {
      count: payload.data?.count || 1,
      ...payload.data // 保留其他自定义数据
    },
    badge: '/path/to/badge-icon.png' // 可选：显示数量的小图标（Chrome支持）
  };

  event.waitUntil(
    // 获取所有同tag的现有通知
    self.registration.getNotifications({ tag: mergeTag })
      .then(existingNotifications => {
        let totalCount = newNotification.data.count;

        // 累加现有通知的数量，并关闭旧通知
        if (existingNotifications.length > 0) {
          existingNotifications.forEach(notify => {
            totalCount += notify.data?.count || 1;
            notify.close();
          });
        }

        // 更新通知内容，显示累计数量
        newNotification.body = `你有${totalCount}条未读通知`;
        newNotification.data.count = totalCount;

        // 显示合并后的通知
        return self.registration.showNotification(newNotification.title, newNotification);
      })
  );
});

几个注意事项 #

• 确保你的Service Worker注册范围正确，能正常接收push事件；
• 不同浏览器对Notification API的支持略有差异，比如badge字段在Chrome、Edge里好用，Safari可能需要用其他方式展示数量；
• 如果是通过Firebase控制台手动发送推送，没法直接加tag的话，可以在「高级选项」里添加自定义数据（比如notificationTag: "unread-messages"），然后在Service Worker里读取这个字段作为合并标识。

内容的提问来源于stack exchange，提问作者ravi