firebase-messaging-sw.js内无法导入Firebase模块问题求助

你遇到的两个报错分别对应以下核心原因：

• 用importScripts加载Firebase 9+默认ESM版本SDK失败：Firebase 9及以上版本的默认CDN产物是ES模块化格式，不支持importScripts加载，会触发Worker全局作用域下的导入异常
• 直接用import语句报错：你注册Service Worker时没有指定模块类型，浏览器默认把SW文件当作普通脚本处理，不支持ES模块语法
• 访问SW文件触发下载：Django返回该文件的响应头Content-Type未设置为application/javascript，浏览器识别为可下载文件而非可执行脚本

第一步：修复Django侧SW文件返回配置 #

如果你的firebase-messaging-sw.js放在Django的static目录下，确认全局静态文件配置已开启，Nginx或Django runserver会自动返回正确的MIME类型；如果你是自定义视图返回该文件，需要在响应中指定内容类型：

from django.http import HttpResponse
import os

def serve_firebase_sw(request):
    sw_path = os.path.join(os.path.dirname(__file__), 'firebase-messaging-sw.js')
    with open(sw_path, 'r') as f:
        content = f.read()
    return HttpResponse(content, content_type='application/javascript')

同时在urls.py中添加对应路由，确保路径为根路径下的/firebase-messaging-sw.js。

第二步：选择兼容的导入方案，二选一即可 #

方案1：使用importScripts导入（无需修改SW注册逻辑） #

使用Firebase 9+的兼容版本CDN链接（带-compat后缀），同时删除重复导入、修正拼写错误，完整SW代码如下：

// 仅导入兼容版SDK，不要重复导入
importScripts('https://www.gstatic.com/firebasejs/9.0.0/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/9.0.0/firebase-messaging-compat.js');

// 初始化Firebase
const BikumApp = firebase.initializeApp({
  apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxx',
  authDomain: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
  databaseURL: 'xxxxxxxxxxxxxxxxxxxxxxxxxx',
  projectId: 'xxxxxxxxxxxxxxxxxxxxxx',
  storageBucket: 'xxxxxxxxxxxxxxxxxxxxxxx',
  messagingSenderId: 'xxxxxxxxxxxxxxxxx',
  appId: "1xxxxxxxxxxxxxxxxxxxxxxxxxx",
  measurementId: 'xxxxxxxxxxxxxxxxxx',
});

// 获取Messaging实例，修正拼写错误firebae→firebase
const messaging = firebase.messaging();

// 监听后台消息
messaging.onBackgroundMessage((payload) => {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  const notificationTitle = 'Background Message Title';
  const notificationOptions = {
    body: 'Background Message body.',
    icon: '/firebase-logo.png'
  };
  
  self.registration.showNotification(notificationTitle, notificationOptions);
});

方案2：使用ES模块import导入（需要修改SW注册逻辑） #

首先找到你前端注册Service Worker的代码，添加模块类型配置：

// 原注册代码新增第二个参数指定type为module
navigator.serviceWorker.register('/firebase-messaging-sw.js', {
  type: 'module'
})

之后SW文件可以直接用ES模块导入，完整代码如下：

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js";
import { getMessaging, onBackgroundMessage } from "https://www.gstatic.com/firebasejs/9.0.0/firebase-messaging-sw.js";

const BikumApp = initializeApp({
  apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxx',
  authDomain: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
  databaseURL: 'xxxxxxxxxxxxxxxxxxxxxxxxxx',
  projectId: 'xxxxxxxxxxxxxxxxxxxxxx',
  storageBucket: 'xxxxxxxxxxxxxxxxxxxxxxx',
  messagingSenderId: 'xxxxxxxxxxxxxxxxx',
  appId: "1xxxxxxxxxxxxxxxxxxxxxxxxxx",
  measurementId: 'xxxxxxxxxxxxxxxxxx',
});

const messaging = getMessaging(BikumApp);

onBackgroundMessage(messaging, (payload) => {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  const notificationTitle = 'Background Message Title';
  const notificationOptions = {
    body: 'Background Message body.',
    icon: '/firebase-logo.png'
  };
  
  self.registration.showNotification(notificationTitle, notificationOptions);
});

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