Flutter Web在macOS上无法接收Firebase Messaging通知求助

• 浏览器与系统权限检查
  macOS上Safari对Web Push支持不完善，换Chrome、Edge这类标准浏览器测试。同时确认：浏览器已给网站开启通知权限，系统偏好设置>通知里也允许该浏览器发送通知。

• Service Worker 冲突问题
  Flutter自带的Service Worker和你手动注册的firebase-messaging-sw.js可能冲突。要么把Firebase的消息逻辑合并到Flutter的Service Worker里，要么调整注册顺序——等Flutter初始化完成后再注册Firebase的Service Worker，避免被覆盖。

• 推送Payload格式是否正确
  测试通知必须带notification字段，后台消息还要确保data字段合规。示例正确Payload：

  {
    "message": {
      "token": "你的FCM Token",
      "notification": {
        "title": "测试通知",
        "body": "这是一条测试推送"
      },
      "data": {
        "key": "value"
      }
    }
  }
  

• VAPID密钥完全匹配
  拿Dart代码里填的VAPID密钥和Firebase控制台生成的对比，大小写、特殊字符都不能错，不匹配的话FCM鉴权过不了。

• HTTPS环境要求
  Web Push必须走HTTPS（localhost例外）。生产环境要配置有效SSL证书；本地测试用命令启动HTTPS服务：

  flutter run -d chrome --web-port=443 --web-certificate=cert.pem --web-key=key.pem
  

• SDK版本兼容
  确认firebase-messaging-sw.js里的Firebase SDK版本（10.11.1）和pubspec.yaml中firebase_messaging的依赖版本兼容，版本不匹配会导致底层通信异常。

• 检查Service Worker状态
  打开浏览器开发者工具的Application>Service Workers面板，确认firebase-messaging-sw.js已激活（状态显示activated）。如果注册失败，看Console里的报错信息排查路径或权限问题。

• 前台消息监听
  应用在前台时收不到通知的话，要在Dart代码里加监听：

  FirebaseMessaging.onMessage.listen((RemoteMessage message) {
    print('前台收到消息: ${message.notification?.title}');
    // 这里可以手动触发通知弹窗
  });
  

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