Next.js集成Firebase Cloud Messaging遇importScripts加载错误求助

错误根源 #

你遇到的importScripts加载失败，是因为Firebase 9.x的标准模块化脚本是为浏览器window环境设计的，无法在Service Worker的WorkerGlobalScope中正常加载。必须使用Firebase提供的**兼容模式（compat）**脚本，才能在Service Worker中正常运行。

分步解决 #

1. 修正Service Worker脚本 #

替换/public/firebase-messaging-sw.js中的脚本引用为compat版本：

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

const firebaseConfig = {
    apiKey: "A.............KU0",
    authDomain: "ad......f.firebaseapp.com",
    projectId: "a.......f",
    storageBucket: "ad......m",
    messagingSenderId: "6.....0",
    appId: "1:63....331",
    measurementId: "G........Z"
};

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

messaging.onBackgroundMessage((payload) => {
  console.log(
    "[firebase-messaging-sw.js] Received background message ",
    payload
  );
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
    icon: payload.notification.image,
  };
  
  self.registration.showNotification(notificationTitle, notificationOptions);
});

2. 手动注册Service Worker（Next.js必做） #

Next.js不会自动识别并注册public目录下的Service Worker，需要在前端代码中手动注册，避免Firebase自动查找失败。修改navbar.js的useEffect：

import { useEffect } from 'react';
import { requestNotificationPermission } from '../helper/pushNotification';

export default function Navbar() {
  useEffect(() => {
    // 注册Service Worker
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/firebase-messaging-sw.js')
        .then((registration) => {
          console.log('Service Worker registered:', registration);
          // 将注册实例绑定到Firebase Messaging
          import('../helper/firebase').then(({ messaging }) => {
            if (messaging) messaging.useServiceWorker(registration);
          });
        })
        .catch((error) => {
          console.error('Service Worker注册失败:', error);
        });
    }

    // 请求通知权限
    requestNotificationPermission();
  }, []);

  return (
    // 你的Navbar组件内容
  );
}

3. 优化Firebase初始化逻辑 #

修改/helper/firebase.js，用更可靠的方式判断浏览器环境：

import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging";

const firebaseConfig = {
    apiKey: "A.............KU0",
    authDomain: "ad......f.firebaseapp.com",
    projectId: "a.......f",
    storageBucket: "ad......m",
    messagingSenderId: "6.....0",
    appId: "1:63....331",
    measurementId: "G........Z"
};

export const app = initializeApp(firebaseConfig);
export let messaging = null;

// 仅在浏览器环境中初始化messaging
if (typeof window !== 'undefined') {
    messaging = getMessaging(app);
}

export const VAPID_KEY = "BGP.....................A";

4. 开发环境适配 #

FCM要求HTTPS环境（localhost例外，但部分浏览器可能限制），如果开发中仍有问题：

• 启动Next.js时添加HTTPS参数：next dev --experimental-https
• 确认浏览器允许localhost的Service Worker加载

1. 安装依赖
   安装官方Firebase SDK：

   npm install firebase
   

2. 配置后台消息处理
   在public目录下创建firebase-messaging-sw.js，使用compat脚本初始化并处理后台推送。

3. 客户端Firebase初始化
   在helper/firebase.js中初始化应用，仅在浏览器环境创建messaging实例。

4. 实现权限与Token逻辑
   在helper/pushNotification.js中编写通知权限请求和设备Token获取逻辑。

5. 注册并绑定Service Worker
   在前端组件中手动注册Service Worker，并绑定到Firebase Messaging。

6. 测试推送
   通过Firebase控制台发送测试消息，验证前台/后台消息接收效果。

内容的提问来源于stack exchange，提问作者Abhinay Narayan Singh