Flutter Web项目firebase_messaging服务工作者注册报404错误如何解决？

报错核心是Firebase Messaging默认会从网站根路径请求firebase-messaging-sw.js，但你的项目部署在站点的/appname/子路径下，且存在配置不匹配的问题，具体原因如下：

• 你的Flutter Web配置了<base href="/appname/">，说明项目实际部署在域名的/appname/子目录，但是Firebase Messaging默认会去根域名https://jordanaqqar.com/下查找service worker文件，导致404
• Firebase SDK版本不一致：firebase-app.js用的是8.6.1版本，其他firebase组件用的是8.8.0版本，版本不匹配可能引发未知异常
• 如果未手动指定service worker路径，Firebase不会识别你自己在flutter-first-frame回调里注册的sw文件，还是会发起默认路径的请求

1. 统一Firebase SDK版本
   把index.html里的firebase-app.js的版本从8.6.1改成8.8.0，保持所有Firebase组件版本一致：

<script src="https://www.gstatic.com/firebasejs/8.8.0/firebase-app.js"></script>

2. 配置Firebase Messaging使用自定义的service worker路径
   修改index.html里的Firebase初始化代码，在初始化messaging的时候指定你已经注册的service worker，同时删除你之前手动写的冗余service worker注册逻辑：

<script>
var firebaseConfig = {
    apiKey: "APIKEY",
    authDomain: "AUTHDOMAIN",
    projectId: "PROJECTID",
    storageBucket: "STORAGEBUCKET",
    messagingSenderId: "MESSAGINGSENDERID",
    appId: "APPID",
    measurementId: "MEASUREMENTID"
};
firebase.initializeApp(firebaseConfig);
// 新增以下配置，指定sw路径
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/appname/firebase-messaging-sw.js')
    .then(registration => {
        const messaging = firebase.messaging();
        messaging.useServiceWorker(registration);
    });
}
</script>

删除原来的这段代码：

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

3. 确认文件存放位置
   把firebase-messaging-sw.js放在项目的web/根目录下，执行flutter build web之后，确认build/web目录下存在这个文件，部署的时候要把整个build/web下的所有内容都上传到服务器的/appname/目录下，确保https://jordanaqqar.com/appname/firebase-messaging-sw.js可以直接访问到。

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