FCM默认Service Worker注册失败，网页无法接收推送消息求助

错误信息 #

消息推送（Messaging）：我们无法注册默认的Service Worker。为作用域（'http://localhost:54558/firebase-cloud-messaging-push-scope'）注册脚本（'http://localhost:54558/firebase-messaging-sw.js'）的Service Worker失败：Service Worker脚本执行失败。

已尝试调整firebase-messaging-sw.js和index.html等文件，但网页仍无法接收文本推送消息，始终无法获取FCM推送文本，请求协助解决。

相关代码文件 #

Firebase-messaging-sw.js #

importScripts("https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js");
importScripts("https://www.gstatic.com/firebasejs/7.5.0/firebase-messaging.js");
// const firebaseConfig = {
//     apiKey: "AIzaSyAzWCmRI_hR6lXsRDEJMtpo89BTw9r27OA",
//     authDomain: "matabwebadmin.firebaseapp.com",
//     projectId: "matabwebadmin",
//     storageBucket: "matabwebadmin.appspot.com",
//     messagingSenderId: "104162661195",
//     appId: "1:104162661195:web:896bdc9088fd54884b4ece"
//   };


  Firebase.initializeApp({
    //    name: "matabmaindatabase",
  apiKey:"AIzaSyAzWCmRI_hR6lXsRDEJMtpo89BTw9r27OA",
  appId: '1:104162661195:web:896bdc9088fe54884b4ece',
  messagingSenderId: "104162661195",
  projectId: "matabwebadmin",
  storageBucket: "matabwebadmin.appspot.com",
  });
  
const messaging = firebase.messaging();




if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('../firebase-messaging-sw.js')
      .then(function(registration) {
        console.log('Registration successful, scope is:', registration.scope);
      }).catch(function(err) {
        console.log('Service worker registration failed, error:', err);
      });
    }

Index.html #

<!DOCTYPE html>
<html>
<head>
  <!--
    If you are serving your web app in a path other than the root, change the
    href value below to reflect the base path you are serving from.

    The path provided below has to start and end with a slash "/" in order for
    it to work correctly.

    For more details:
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

    This is a placeholder for base href that will be replaced by the value of
    the `--base-href` argument provided to `flutter build`.
  -->
  <base href="$FLUTTER_BASE_HREF">

  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="A new Flutter project.">

  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="matabweb">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="favicon.png"/>

  <title>matabweb</title>
  <link rel="manifest" href="manifest.json">

  <script>
    // The value below is injected by flutter build, do not touch.
    var serviceWorkerVersion = null;
  </script>
  <!-- This script adds the flutter initialization JS code -->
  <script src="flutter.js" defer></script>
</head>
<body>
  <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-storage.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-messaging.js"></script>

     


<script>
  if ("serviceWorker" in navigator) {
    window.addEventListener("load", function () {
      // navigator.serviceWorker.register("/flutter_service_worker.js");
      navigator.serviceWorker.register("/firebase-messaging-sw.js");
    });
  }
  </script>

<script>
  if ('serviceWorker' in navigator) {
    window.addEventListener("load", function () {
      navigator.serviceWorker.register("firebase-messaging-sw.js");
    });
  
    window.addEventListener('flutter-first-frame', function () {
      navigator.serviceWorker.register('flutter_service_worker.js');
    });
  }
  </script>


  <script>
    window.addEventListener('load', function(ev) {
      // Download main.dart.js
      _flutter.loader.loadEntrypoint({
        serviceWorker: {
          serviceWorkerVersion: serviceWorkerVersion,
        }
      }).then(function(engineInitializer) {
        return engineInitializer.initializeEngine();
      }).then(function(appRunner) {
        return appRunner.runApp();
      });
    });
  </script>
</body>
</html>

Main.dart #

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  const firebaseConfig = {
    "apiKey": "AIzaSyAzWCmRI_hR6lXsRDEJMtpo89BTw9r27OA",
    "authDomain": "matabwebadmin.firebaseapp.com",
    "projectId": "matabwebadmin",
    "storageBucket": "matabwebadmin.appspot.com",
    "messagingSenderId": "104162661195",
    "appId": "1:104162661195:web:896bdc9088fd54884b4ece"
  };
  FirebaseApp app = await Firebase.initializeApp(
      //    name: "matabmaindatabase",
      options: FirebaseOptions(
    apiKey: FirebaseConfiurations.apiKey,
    appId: FirebaseConfiurations.appId,
    messagingSenderId: FirebaseConfiurations.messagingSenderId,
    projectId: FirebaseConfiurations.projectId,
    storageBucket: "matabwebadmin.appspot.com",
  ));
  //print(app);

  // FirebaseApp app = await Firebase.initializeApp(
  //     name: 'matabweb',
  //     options: const FirebaseOptions(
  //         appId: '1:104162661195:web:896bdc9088fd54884b4ece',
  //         apiKey: 'AIzaSyAzWCmRI_hR6lXsRDEJMtpo89BTw9r27OA',
  //         messagingSenderId: '104162661195',
  //         projectId: 'matabwebadmin'));
  debugPrint(app.toString());
  // Get.put(BookController(), tag: 'bookController');
  // Get.lazyPut(() => UserController(), tag: 'userController');

  runApp(MyApp());
  FirebaseMessaging.instance.getToken().then((print));
}

解决方案 #

1. 修复Firebase-messaging-sw.js核心错误 #

• 修正大小写：将Firebase.initializeApp改为firebase.initializeApp（import的是小写firebase对象）
• 移除自注册代码：删除文件末尾的if ('serviceWorker' in navigator)代码块，Service Worker脚本不能注册自己，注册操作需在页面中完成
• 统一版本：把importScripts里的7.5.0版本改为和index.html一致的8.10.1，避免版本不兼容
• 对齐配置：appId改为和其他文件一致的1:104162661195:web:896bdc9088fd54884b4ece

修改后的代码：

importScripts("https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js");
importScripts("https://www.gstatic.com/firebasejs/8.10.1/firebase-messaging.js");

firebase.initializeApp({
  apiKey:"AIzaSyAzWCmRI_hR6lXsRDEJMtpo89BTw9r27OA",
  appId: '1:104162661195:web:896bdc9088fd54884b4ece',
  messagingSenderId: "104162661195",
  projectId: "matabwebadmin",
  storageBucket: "matabwebadmin.appspot.com",
});
  
const messaging = firebase.messaging();

// 可选：添加后台消息处理，用于接收应用退后台时的推送
messaging.setBackgroundMessageHandler(function(payload) {
  const title = payload.notification.title;
  const options = {
    body: payload.notification.body,
    icon: '/icons/Icon-192.png'
  };
  return self.registration.showNotification(title, options);
});

2. 清理Index.html重复注册逻辑 #

• 删除重复的Service Worker注册代码，保留一套逻辑避免冲突
• 统一Firebase脚本版本，把firebase-messaging.js改为8.10.1

修改后的关键部分：

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-storage.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-messaging.js"></script>

<script>
  if ("serviceWorker" in navigator) {
    window.addEventListener("load", function () {
      // 先注册FCM的Service Worker，再注册Flutter的
      navigator.serviceWorker.register("/firebase-messaging-sw.js")
        .then(reg => {
          console.log("FCM Service Worker注册成功", reg);
          navigator.serviceWorker.register('flutter_service_worker.js')
            .then(flutterReg => console.log("Flutter Service Worker注册成功", flutterReg));
        })
        .catch(err => console.error("Service Worker注册失败", err));
    });
  }
</script>

3. 确保Main.dart配置一致 #

• 直接在FirebaseOptions中写死配置值，避免依赖外部类可能的错误：

FirebaseApp app = await Firebase.initializeApp(
  options: const FirebaseOptions(
    apiKey: "AIzaSyAzWCmRI_hR6lXsRDEJMtpo89BTw9r27OA",
    appId: "1:104162661195:web:896bdc9088fd54884b4ece",
    messagingSenderId: "104162661195",
    projectId: "matabwebadmin",
    storageBucket: "matabwebadmin.appspot.com",
  )
);

4. 额外检查项 #

• 确保firebase-messaging-sw.js放在网站根目录，和index.html同级，保证注册路径有效
• 在浏览器开发者工具的Application -> Service Workers中查看注册状态，排查剩余错误
• 生产环境需运行在HTTPS下（localhost除外），Service Worker依赖HTTPS才能正常工作

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