Firebase FCM网页推送时报ServiceWorker注册404错误如何解决

1. 修复service worker 404报错 #

报错核心是浏览器无法访问到你的firebase-messaging-sw.js文件，按以下步骤排查：

• 确认本地开发服务的访问地址正确：如果你的本地服务运行在非80端口（比如VSCode Live Server默认端口5500、Vue/React脚手架默认端口8080/3000），请确保你访问页面时带端口号，例如http://localhost:5500，而非直接访问http://localhost
• 直接测试sw文件可访问性：在浏览器地址栏输入{你当前页面的访问域名+端口}/firebase-messaging-sw.js，如果能正常返回JS代码内容则路径配置正确，否则需要调整你的静态资源服务配置，确保项目根目录的文件可以被公开访问

2. 修正Firebase 9版本代码适配问题 #

你当前使用的是Firebase 9模块化版本，原有代码混用了旧版本API，会触发后续报错，按以下内容修正两个文件：

修正index.html代码 #

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>Firebase messaging testing</h2>
    
    <p id="token"></p>


    <script type="module">
        import { initializeApp } from "https://www.gstatic.com/firebasejs/9.1.1/firebase-app.js";
        import { getMessaging, getToken, onMessage } from "https://www.gstatic.com/firebasejs/9.1.1/firebase-messaging.js";

        const firebaseConfig = {
            // 保留你原有的配置不变
            apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxx",
            authDomain: "xxxxxxxxxxxxxxxxxxxxxxxxxxxx",
            databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxxxxx",
            projectId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxx",
            storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxxxxx",
            messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxx",
            appId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxx",
            measurementId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxx"
        };

        // 初始化Firebase
        const app = initializeApp(firebaseConfig);
        const messaging = getMessaging(app);
        let swRegistration = null;

        // 先手动注册service worker，避免自动注册路径问题
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', async () => {
                swRegistration = await navigator.serviceWorker.register('/firebase-messaging-sw.js');
                initMessaging();
            });
        }

        function initMessaging() {
            Notification.requestPermission().then(function(permission) {
                console.log(permission);
                return getToken(messaging, { 
                    vapidKey: '你的原有vapidKey',
                    serviceWorkerRegistration: swRegistration
                });
            })
            .then(function(token) {
                console.log("Token : "+token);
                document.getElementById("token").innerHTML=token;
            })
            .catch(function (reason) {
                console.log(reason);
            });

            onMessage(messaging, function (payload) {
                console.log(payload);
                const notificationOption={
                    body:payload.notification.body,
                    icon:payload.notification.icon
                };

                if(Notification.permission==="granted"){
                    var notification=new Notification(payload.notification.title,notificationOption);
                    notification.onclick=function (ev) {
                        ev.preventDefault();
                        window.open(payload.notification.click_action,'_blank');
                        notification.close();
                    }
                }
            });
        }
      </script>
</body>
</html>

修正firebase-messaging-sw.js代码 #

// 替换为compat版本的cdn，兼容service worker里的非模块化写法
importScripts("https://www.gstatic.com/firebasejs/9.1.1/firebase-app-compat.js");
importScripts("https://www.gstatic.com/firebasejs/9.1.1/firebase-messaging-compat.js");

const firebaseConfig = {
    // 保留你原有的配置不变
    apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    authDomain: "xxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    projectId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    appId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    measurementId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxx"
};

firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();

// 旧版本的setBackgroundMessageHandler替换为onBackgroundMessage
messaging.onBackgroundMessage(function(payload) {
    console.log(payload);
    const notificationOption={
        body:payload.notification.body,
        icon:payload.notification.icon
    };
    return self.registration.showNotification(payload.notification.title,notificationOption);
});

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