如何用Firebase 9编写处理FCM后台消息的Service Worker代码

方案1：使用官方兼容版SDK（无需构建工具，支持importScripts加载） #

Firebase 9 提供了向下兼容的 compat 版本，符合UMD规范，可直接通过importScripts在Service Worker中加载，不用修改原有v8版本的调用逻辑：

完整firebase-messaging-sw.js代码示例 #

// 引入compat版SDK，注意路径带-compat后缀
importScripts('https://www.gstatic.com/firebasejs/9.1.2/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/9.1.2/firebase-messaging-compat.js');

// 替换为你的Firebase项目配置
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
};

// 初始化实例
firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();

// 监听后台FCM消息
messaging.onBackgroundMessage((payload) => {
  // 自定义通知展示逻辑
  const notifyTitle = payload.notification?.title || "新消息通知";
  const notifyOptions = {
    body: payload.notification?.body || "你收到了一条新消息",
    icon: "/static/notify-icon.png", // 替换为你的通知图标路径
    data: payload.data // 携带自定义参数，可用于通知点击跳转逻辑
  };

  // 弹出系统通知
  return self.registration.showNotification(notifyTitle, notifyOptions);
});

// 可选：监听通知点击事件
self.addEventListener('notificationclick', (event) => {
  event.notification.close();
  // 自定义点击后的跳转逻辑
  event.waitUntil(
    clients.openWindow('/target-page')
  );
});

方案2：使用构建工具打包（适配原生模块化语法） #

如果你的项目接入了Vite、Webpack等构建工具，可直接使用Firebase 9原生模块化API，打包后生成Service Worker产物即可：

• 先安装Firebase依赖：npm install firebase
• 编写Service Worker源文件（例如sw-src.js）：

// 引入Firebase 9模块化API
import { initializeApp } from 'firebase/app';
import { getMessaging, onBackgroundMessage } from 'firebase/messaging/sw';

// 替换为你的项目配置
const firebaseConfig = {
  // 同上配置内容
};

const app = initializeApp(firebaseConfig);
const messaging = getMessaging(app);

// 监听后台消息
onBackgroundMessage(messaging, (payload) => {
  const notifyTitle = payload.notification?.title || "新消息通知";
  const notifyOptions = {
    body: payload.notification?.body || "你收到了一条新消息",
    icon: "/static/notify-icon.png"
  };
  return self.registration.showNotification(notifyTitle, notifyOptions);
});

• 配置构建工具将该源文件打包为独立的firebase-messaging-sw.js，部署到项目根路径即可生效。

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