Flutter Web中FirebaseMessaging.onMessage.listen无法正常工作

1. 确认初始化顺序与依赖加载 #

• 确保index.html中先完成Firebase JS SDK的初始化，再加载Flutter的web入口脚本。示例结构：

  <!-- 加载Firebase核心SDK -->
  <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js"></script>
  <!-- 加载消息传递SDK -->
  <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-messaging.js"></script>
  <script>
    // 初始化Firebase配置
    const firebaseConfig = {
      apiKey: "YOUR_API_KEY",
      authDomain: "YOUR_AUTH_DOMAIN",
      projectId: "YOUR_PROJECT_ID",
      storageBucket: "YOUR_STORAGE_BUCKET",
      messagingSenderId: "YOUR_SENDER_ID",
      appId: "YOUR_APP_ID"
    };
    firebase.initializeApp(firebaseConfig);
  </script>
  <!-- 加载Flutter web脚本 -->
  <script src="main.dart.js" type="application/javascript"></script>
  

• Flutter端先调用Firebase.initializeApp()，再注册onMessage监听，确保初始化完成后再绑定事件。

2. 避免JS与Dart监听器冲突 #

• 若index.html中已注册JS层面的onMessage监听器，会抢占消息事件导致Dart侧收不到。先注释掉JS侧监听，测试Dart侧是否能正常接收。
• 若需保留JS侧监听，可通过window.postMessage将消息传递给Dart：

  // index.html中的JS代码
  const messaging = firebase.messaging();
  messaging.onMessage((payload) => {
    window.postMessage({ type: 'FCM_MESSAGE', payload: payload }, '*');
  });
  

  Dart侧通过dart:html监听：

  import 'dart:html' as html;
  
  void main() {
    html.window.addEventListener('message', (event) {
      final html.MessageEvent msgEvent = event as html.MessageEvent;
      if (msgEvent.data['type'] == 'FCM_MESSAGE') {
        print('Received message from JS: ${msgEvent.data['payload']}');
      }
    });
    // 其他初始化代码...
  }
  

3. 检查推送消息的Payload格式 #

• Web端前台接收消息，需确保消息包含data字段，纯notification消息会被浏览器直接处理，无法传递到Dart的onMessage。示例合法API请求Payload：

  {
    "message": {
      "token": "WEB_DEVICE_TOKEN",
      "notification": {
        "title": "测试通知",
        "body": "通知内容"
      },
      "data": {
        "custom_key": "custom_value"
      }
    }
  }
  

• 从Firebase控制台发送时，务必勾选「添加自定义数据」选项，哪怕只填一个空字段。

4. 验证Web配置完整性 #

• 检查web/manifest.json中是否包含Firebase要求的固定字段：

  {
    "gcm_sender_id": "103953800507"
  }
  

• 确认firebase-messaging-sw.js文件存在于web根目录（部分浏览器需该文件才能正常接收前台消息），文件内容可简化为：

  importScripts('https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js');
  importScripts('https://www.gstatic.com/firebasejs/9.23.0/firebase-messaging.js');
  
  firebase.initializeApp({
    messagingSenderId: "YOUR_SENDER_ID"
  });
  
  const messaging = firebase.messaging();
  

5. 调试权限与初始化状态 #

• 检查用户是否已授权通知权限：

  final settings = await FirebaseMessaging.instance.requestPermission();
  print('权限状态: ${settings.authorizationStatus}');
  

  只有当authorizationStatus为AuthorizationStatus.authorized时，才能接收前台消息。
• 在Dart初始化代码中添加打印，确认onMessage监听已正确注册：

  final messaging = FirebaseMessaging.instance;
  print('Firebase Messaging 初始化完成');
  messaging.onMessage.listen((message) {
    print('收到前台消息: ${message.data}');
  });
  

内容的提问来源于stack exchange，提问作者Muhammad Umair Saqib