Service Worker通过HTTPS引入模块 Vue注册Firebase v9 FCM报错如何解决

问题排查与解决方法 #

核心诱因

你遇到的you cannot use import statements outside of a module错误，常见原因是3种：

• Service Worker文件存放路径错误，浏览器无法正确读取为ES模块
• 部分低版本浏览器不支持Service Worker的ES模块特性
• 静态资源服务器返回的SW文件MIME类型不符合要求

解决方案1：兼容优先方案（推荐，无ES模块兼容问题）

直接使用Firebase v9的compat版本SDK，改用importScripts加载，完全规避模块导入问题：

1. 将firebase-messaging-sw.js放在Vue项目的public根目录下，确保打包后和index.html同层级，修改SW代码如下：

importScripts('https://www.gstatic.com/firebasejs/9.0.2/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/9.0.2/firebase-messaging-compat.js');

// 直接填入你的Firebase配置，避免跨路径导入异常
const fbConfig = {
  apiKey: "你的配置值",
  authDomain: "你的配置值",
  projectId: "你的配置值",
  storageBucket: "你的配置值",
  messagingSenderId: "你的配置值",
  appId: "你的配置值"
};

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

onBackgroundMessage(messaging, (payload) => {
    console.log('[firebase-messaging-sw.js] Received background message ', payload);

    const notificationTitle = payload.message.notification.title;
    // 注意这里之前的写法错误，showNotification第二个参数必须是对象
    const notificationOptions = {
        body: payload.message.notification.body
    };

    let outcome = self.registration.showNotification(
        notificationTitle,
        notificationOptions
    );
    console.log('[firebase-messaging-sw.js] showNotification outcome', outcome)
});

2. 修改Vue组件内的注册代码，去掉type: 'module'配置：

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/firebase-messaging-sw.js')
        .then(reg => {
            console.log(`Service Worker Registration (Scope: ${reg.scope})`);
        })
        .catch(error => {
            const msg = `Service Worker Error (${error})`;
            console.error(msg);
        });
} else {
    console.warn('Service Worker not available');
}

解决方案2：保留ES模块写法

如果一定要用原生import语法，按以下步骤排查：

1. 确认firebase-messaging-sw.js存放在public根目录，/js/firebase/firebase-config.js路径对应public下的文件路径正确
2. 保留注册代码中的{type: 'module'}配置
3. 检查部署环境的静态资源服务器返回的firebase-messaging-sw.js响应头中Content-Type为application/javascript，开发环境Vue CLI/Vite默认符合要求
4. 测试用浏览器支持Service Worker ES模块特性（Chrome 89+、Firefox 111+、Edge 89+）

通用验证注意事项

每次修改Service Worker代码后，需要打开浏览器开发者工具-应用/Application面板，找到Service Worker选项，删除旧的注册记录后硬刷新页面，避免浏览器缓存旧SW导致修改不生效。

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