FCM 推送通知在后台时会绕过 service worker 的 JavaScript 逻辑直接由系统展示，导致条件判断（如订阅状态检查）失效；解决方法是改用纯 data 消息，并在 onBackgroundMessage 中完全自主控制通知的显示逻辑。
fcm 推送通知在后台时会绕过 service worker 的 javascript 逻辑直接由系统展示，导致条件判断（如订阅状态检查）失效；解决方法是改用纯 data 消息，并在 `onbackgroundmessage` 中完全自主控制通知的显示逻辑。
Firebase Cloud Messaging（FCM）支持两种消息类型：Notification 消息和Data 消息，二者在 Web 端（尤其是后台/非活跃页面场景）的行为有本质区别：
- ✅ Notification 消息（含 notification 字段）：当网页处于后台或关闭状态时，浏览器直接接管并自动显示通知，完全不执行 service worker 中的 onBackgroundMessage 回调 —— 这正是你遇到问题的根本原因：if (subscribedTables && !subscribedTables[table]) { return; } 根本没有机会运行。
- ✅ Data 消息（仅含 data 字段，不含 notification）：无论前台/后台，均100% 触发 onBackgroundMessage，开发者可自由决定是否、何时、以何种方式显示通知。
? 正确做法：服务端发送纯 Data 消息
确保你的服务器发送的 FCM 请求 payload 不包含 notification 字段，仅保留 data：
{
"message": {
"token": "YOUR_FCM_TOKEN",
"data": {
"table": "orders",
"title": "新订单到达",
"body": "订单 #12345 已创建",
"icon": "/android-icon-192x192.png"
}
}
}
⚠️ 注意：data 中的字段值必须为字符串（即使数字也要转为字符串），例如 "table": "orders" 而非 "table": 123。
✅ Service Worker 改写：完整可控逻辑
更新你的 firebase-messaging-sw.js，移除对 payload.notification 的依赖，改从 payload.data 提取内容，并严格校验订阅状态：
// ... firebase 初始化代码保持不变 ...
const messaging = firebase.messaging();
messaging.onBackgroundMessage(async function (payload) {
console.log('[FCM] Received background data message:', payload);
// ✅ 仅从 data 字段读取内容（确保服务端未发送 notification 字段）
const data = payload.data;
const table = data.table;
const notificationTitle = data.title || '通知';
const notificationBody = data.body || '';
const icon = data.icon || '/android-icon-192x192.png';
try {
const subscribedTables = await localforage.getItem('subscribedTables');
console.log('[FCM] Subscribed tables:', subscribedTables);
// ? 关键判断：未订阅该表，直接终止，不显示通知
if (!subscribedTables || !subscribedTables[table]) {
console.log(`[FCM] Ignoring notification: not subscribed to table '${table}'`);
return; // ← 通知被静默丢弃
}
// ✅ 满足条件才显示通知
const notificationOptions = {
body: notificationBody,
icon: icon,
requireInteraction: true,
badge: '/favicon.ico'
};
self.registration.showNotification(notificationTitle, notificationOptions);
} catch (err) {
console.error('[FCM] Failed to process background message:', err);
}
});
? 补充注意事项
- 不要混用 notification + data：虽然 FCM 允许混合发送，但在 Web 端，只要存在 notification 字段，系统级通知就会触发，onBackgroundMessage 仍会被调用（但通知已显示），无法实现“条件性屏蔽”。因此务必保证 payload 纯 data-only。
- 本地存储兼容性：localforage 在 service worker 中可用，但需确保其初始化无异步阻塞（当前代码中 importScripts 已正确加载，无需额外 await）。
- 调试技巧：在 Chrome 中打开 chrome://serviceworker-internals/，检查 service worker 是否激活；在 Application > Service Workers 面板启用 “Update on reload” 并勾选 “Offline”，便于复现后台场景。
- 前台消息处理：若需在页面前台也做同样过滤，请同步在 messaging.onMessage() 中实现相同逻辑（此部分不在本例范围，但建议保持一致性）。
通过切换为纯 Data 消息 + 显式 showNotification() 控制，你将获得对通知生命周期的完全掌控，真正实现“按订阅状态动态显示/屏蔽通知”的业务需求。
