Flutter Web集成Firebase Messaging遇Service Worker注册失败求助

问题根源 #

FCM Web端必须依赖firebase-messaging-sw.js文件完成Service Worker注册，你之前移除该文件的操作直接导致了404错误——即便按新文档仅在Dart层配置，也不能省略这个核心文件。

分步解决方案 #

1. 恢复firebase-messaging-sw.js到Web根目录
   将文件放在Flutter项目的web文件夹下（与index.html同级），内容可以是空文件，也可以添加FCM官方推荐的基础模板（推荐后者，避免后续扩展问题）：

   // firebase-messaging-sw.js
   importScripts('https://www.gstatic.com/firebasejs/9.23.0/firebase-app-compat.js');
   importScripts('https://www.gstatic.com/firebasejs/9.23.0/firebase-messaging-compat.js');
   
   firebase.initializeApp({
     // 填入你的Firebase Web配置信息
     apiKey: "YOUR_API_KEY",
     authDomain: "YOUR_AUTH_DOMAIN",
     projectId: "YOUR_PROJECT_ID",
     storageBucket: "YOUR_STORAGE_BUCKET",
     messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
     appId: "YOUR_APP_ID"
   });
   
   const messaging = firebase.messaging();
   

2. 验证文件可访问性
   本地运行项目后，直接在浏览器访问http://localhost:44055/firebase-messaging-sw.js（替换为你的实际端口），确保返回200状态码和文件内容，而非404。如果还是404，检查：

   • 文件路径是否正确，无拼写错误
   • pubspec.yaml的assets配置是否手动排除了该文件（Flutter Web默认会包含web目录下所有文件）

3. 修正Dart代码中的潜在风险
   不要强制使用!拆包getToken的返回值——用户拒绝权限或配置错误时会返回null，应增加空值处理：

   if (kIsWeb) {
     token = await firebaseMessaging.getToken(
       vapidKey: "BLn....pH8", // 确保是Firebase控制台获取的Web公钥
     );
     if (token == null) {
       debugPrint("Failed to get FCM token for web");
       // 这里添加空值处理逻辑，比如提示用户重新授权
     }
   } else {
     token = await firebaseMessaging.getToken();
   }
   

4. 额外检查项

   • 确认DefaultFirebaseOptions.currentPlatform返回的是正确的Web配置，而非Android/iOS配置
   • VAPID密钥必须是Firebase控制台→项目设置→云消息传递→Web配置中的“密钥对”公钥
   • 生产环境部署时必须使用HTTPS协议（localhost例外）

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