网页应用FCM推送通知无法按订阅条件拦截问题咨询

核心原因 #

你当前发送的是FCM通知消息（payload包含notification字段），这类消息会被FCM SDK自动显示，完全绕过你在onBackgroundMessage里的自定义检查逻辑——哪怕你在代码里return不调用showNotification，FCM已经提前弹出了通知。

解决步骤 #

1. 改用纯数据消息发送推送 #

把原本放在notification字段的内容移到data字段中，让FCM不自动处理通知，完全交给你的service worker逻辑控制。

示例推送Payload（后端发送时使用）：

{
  "data": {
    "title": "订单更新提醒",
    "body": "你的桌号有新订单",
    "table": "table_01"
  },
  "to": "目标设备的FCM令牌"
}

2. 修改service worker中的消息处理逻辑 #

调整代码，从payload.data中读取通知内容，确保检查逻辑生效：

messaging.onBackgroundMessage(async function (payload) {
  // 从data字段提取通知内容
  const notificationTitle = payload.data.title;
  const notificationOptions = {
      body: payload.data.body,
      icon: "./android-icon-192x192.png",
      requireInteraction: true,
    };
    
    const subscribedTables = await localforage.getItem("subscribedTables");
    console.log('[firebase-messaging-sw.js] Received background message', payload, subscribedTables);
    const table = payload.data.table;
    
    // 拦截逻辑：未订阅该桌号则直接返回，不显示通知
    if (!subscribedTables || !subscribedTables[table]) {
        console.log("Not subscribed to table, ignoring notification");
        return;
    }
    
  self.registration.showNotification(notificationTitle, notificationOptions);
});

3. 排查检查逻辑的有效性 #

如果修改后还是有问题，先确认以下几点：

• 打开浏览器控制台（Application -> Service Workers -> 勾选"Preserve log"），查看是否打印了Not subscribed to table, ignoring notification——如果没打印，说明你的判断条件没触发，可能是：
  • subscribedTables存储的结构不符合预期（比如不是对象，键名和table不匹配）
  • payload.data.table的取值和你订阅的桌号不一致（拼写错误、大小写问题）
• 单独打印subscribedTables的值，确认存储的订阅数据是否正确。

4. 确保service worker已更新 #

浏览器会缓存旧的service worker，修改代码后需要强制更新：

• 在Chrome DevTools的Application -> Service Workers面板，点击Update按钮
• 或者清除浏览器缓存后重新加载页面

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