React CRA应用中Firebase Web推送通知重复接收问题

你遇到的重复通知问题，核心原因是Firebase SDK会自动处理包含notification字段的推送消息，同时你在onBackgroundMessage回调里又手动调用了self.registration.showNotification，导致两次触发通知展示。

下面提供两种可行的解决方案：

方案一：移除手动通知展示逻辑 #

当推送payload包含notification字段时，Firebase会自动负责展示通知，不需要额外手动调用。修改你的firebase-messaging-sw.js代码：

//firebase-messaging-sw.js

// Scripts for firebase and firebase messaging
importScripts('https://www.gstatic.com/firebasejs/9.14.0/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/9.14.0/firebase-messaging-compat.js');
const firebaseConfig = {
    apiKey: " ",
    authDomain: " ",
    projectId: " ",
    storageBucket: " ",
    messagingSenderId: " ",
    appId: " ",
    measurementId: " "
};

firebase.initializeApp(firebaseConfig);

// Retrieve firebase messaging
const messaging = firebase.messaging();

messaging.onBackgroundMessage(function(payload) {
  console.log('Received background message ', payload);
  // 移除手动展示通知的代码，由Firebase自动处理notification字段
})

注意：把importScripts里的Firebase版本从9.0.0改成和项目依赖一致的9.14.0，避免版本兼容性问题。

方案二：改用data字段传递通知内容 #

如果需要完全自定义通知的展示样式或行为，建议发送推送时使用data字段替代notification字段，这样Firebase不会自动展示通知，只会触发onBackgroundMessage回调，由你手动控制通知展示：

发送端示例（后端/控制台） #

推送payload结构改为：

{
  "data": {
    "title": "你的通知标题",
    "body": "你的通知内容"
  },
  "token": "目标设备的FCM token"
}

修改后的Service Worker代码 #

//firebase-messaging-sw.js

// Scripts for firebase and firebase messaging
importScripts('https://www.gstatic.com/firebasejs/9.14.0/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/9.14.0/firebase-messaging-compat.js');
const firebaseConfig = {
    apiKey: " ",
    authDomain: " ",
    projectId: " ",
    storageBucket: " ",
    messagingSenderId: " ",
    appId: " ",
    measurementId: " "
};

firebase.initializeApp(firebaseConfig);

// Retrieve firebase messaging
const messaging = firebase.messaging();

messaging.onBackgroundMessage(function(payload) {
  console.log('Received background message ', payload);

  const notificationTitle = payload.data.title;
  const notificationOptions = {
    body: payload.data.body,
    // 可添加更多自定义选项，比如图标、点击跳转链接等
  };

  self.registration.showNotification(notificationTitle, notificationOptions);
})

额外注意事项 #

• 修改完成后，清除浏览器缓存并重新注册Service Worker，确保新代码生效；
• 测试时注意区分前台/后台场景，前台消息需要在应用内通过onMessage回调处理，避免重复逻辑。

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