Svelte-Kit集成Firebase Cloud Messaging遇Service Worker注册问题

当然有很多开发者成功完成过这个集成，你的核心问题出在Service Worker的模块兼容逻辑和Svelte-Kit的构建配置上，下面是具体的解决步骤：

1. 调整 Service Worker 文件写法 #

把firebase-messaging-sw.js放在src目录下，不要用ES模块的import语法，改用self.importScripts()加载Firebase兼容版脚本——浏览器的Service Worker环境默认不支持ES模块，这就是你把文件放static目录时报错的直接原因：

// src/firebase-messaging-sw.js
// 加载Firebase兼容库（版本号可根据你的项目需求调整）
self.importScripts('https://www.gstatic.com/firebasejs/9.23.0/firebase-app-compat.js');
self.importScripts('https://www.gstatic.com/firebasejs/9.23.0/firebase-messaging-compat.js');

// 填入你的Firebase项目配置
const firebaseConfig = {
  apiKey: "你的API密钥",
  authDomain: "你的Auth域名",
  projectId: "你的项目ID",
  storageBucket: "你的存储桶地址",
  messagingSenderId: "你的Sender ID",
  appId: "你的App ID"
};

// 初始化Firebase应用
const app = firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();

// 处理后台推送消息（可选配置）
messaging.onBackgroundMessage((payload) => {
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
    icon: '/你的通知图标路径.png'
  };

  self.registration.showNotification(notificationTitle, notificationOptions);
});

2. 修正 Svelte-Kit 配置 #

修改svelte.config.js，指定自定义Service Worker路径的同时，禁用自动注册（避免和我们手动注册的逻辑冲突）：

import adapter from '@sveltejs/adapter-node';
import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: preprocess(),

    kit: {
        adapter: adapter({
            out: 'dist'
        }),
        csrf: {
            checkOrigin: false,
        },
        serviceWorker: {
            register: false, // 禁用自动注册，由我们手动处理
            files: {
                serviceWorker: 'src/firebase-messaging-sw.js' // 指定自定义SW文件路径
            }
        }
    },
};

export default config;

3. 客户端手动注册 Service Worker #

在全局布局组件（比如src/routes/+layout.svelte）中添加注册代码，确保只在浏览器环境中执行：

<script>
  import { onMount } from 'svelte';

  onMount(async () => {
    // 先检查浏览器是否支持Service Worker和推送功能
    if ('serviceWorker' in navigator && 'PushManager' in window) {
      try {
        // 注册FCM专属的Service Worker
        const registration = await navigator.serviceWorker.register('/firebase-messaging-sw.js');
        console.log('Service Worker 注册成功:', registration);

        // 获取FCM推送令牌（按需添加，用于向指定设备推送消息）
        const { getMessaging, getToken } = await import('firebase/messaging');
        const messaging = getMessaging();
        const token = await getToken(messaging, {
          vapidKey: '你的VAPID公钥', // 从Firebase控制台获取
          serviceWorkerRegistration: registration
        });
        console.log('FCM 推送令牌:', token);
      } catch (err) {
        console.error('Service Worker 注册失败:', err);
      }
    }
  });
</script>

4. 构建测试 #

执行vite build && vite preview后，检查dist目录下是否生成了firebase-messaging-sw.js，打开浏览器控制台确认注册成功，即可正常接收FCM推送消息。

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