FCM多播消息发送成功但React端onMessage事件未触发问题

核心问题点 #

• onMessage 监听器注册时机过晚：你把Firebase初始化和onMessage注册逻辑放在了按钮点击事件中，只有点击按钮后才会注册监听器，此前收到的消息无法被捕获
• Firebase重复初始化：每次点击按钮都会调用initializeApp，重复初始化会抛出隐式错误，导致messaging实例异常
• Service Worker(以下简称SW)未正确注册：你仅把firebase-messaging-sw.js放在public根目录，但没有手动注册，且SW默认不支持ES模块的import语法，会导致SW加载失败
• 消息类型匹配问题：纯data类型的消息不会被浏览器自动处理，必须依赖客户端的监听器主动捕获

修复步骤 #

1. 调整Firebase初始化和监听器注册位置
   把初始化逻辑移到组件挂载阶段，不要放在点击事件内，同时避免重复初始化：

import React, {Component} from "react";
import { getMessaging, getToken, onMessage } from "firebase/messaging";
import { initializeApp, getApps, getApp } from "firebase/app";

// 全局初始化Firebase，避免重复初始化
const firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "AUTH_DOMAIN",
  databaseURL: "DB_URL",
  projectId: "PROJECT_ID",
  storageBucket: "STORAGE_BUCKET",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "MEASUREMENT_ID"
};
const firebaseApp = !getApps().length ? initializeApp(firebaseConfig) : getApp();
const messaging = getMessaging(firebaseApp);

export default class App extends Component {
  constructor(props) {
    super(props);
    this.connectButtonPressed = this.connectButtonPressed.bind(this);
  }

  componentDidMount() {
    // 组件挂载就注册前台消息监听器
    onMessage(messaging, (payload) => {
      console.log('Message received. ', payload);
    });

    // 手动注册Service Worker
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', () => {
        // 加type: module支持SW里的ES模块import语法
        navigator.serviceWorker.register('/firebase-messaging-sw.js', {
          type: 'module'
        }).then(registration => {
          console.log('Service Worker注册成功', registration);
          // 绑定SW到messaging实例
          getMessaging(firebaseApp, {
            serviceWorkerRegistration: registration
          });
        }).catch(err => {
          console.log('Service Worker注册失败', err);
        });
      });
    }
  }

  connectButtonPressed(e) {
    Notification.requestPermission().then((permission) => {
      if (permission === 'granted') {
        console.log('Notification permission granted.');
        getToken(messaging, { vapidKey: 'VAPID_KEY_FROM_CONSOLE' }).then((currentToken) => {
          if (currentToken) {
            console.log('currentToken: ', currentToken);
          } else {
            console.log('No registration token available. Request permission to generate one.');
          }
        }).catch((err) => {
          console.log('An error occurred while retrieving token. ', err);
        });
      } else {
        console.log('Unable to get permission to notify.');
      }
    });
  }

  render() {
    return (
      <div><button onClick={this.connectButtonPressed}>Click</button></div>
    )
  }
}

2. 测试消息发送时补充notification字段（可选，方便排查）
   修改Python发送代码，添加通知字段，验证消息链路是否通顺：

message = messaging.MulticastMessage(
    notification=messaging.Notification(
        title='测试标题',
        body='测试消息内容'
    ),
    data={'score': '850', 'time': '2:45'},
    tokens = registration_tokens
)

3. 排查环境限制

• 本地调试必须用localhost域名，上线部署必须用HTTPS域名，HTTP域名无法接收FCM推送
• 检查浏览器地址栏左侧的权限设置，确认通知权限已开启
• 打开浏览器控制台Application > Service Workers，确认firebase-messaging-sw.js已成功激活，无加载报错

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