React+Vite项目配置FCM遇两类错误，求解决方案

错误一：Service Worker注册失败 #

问题原因 #

你在public/firebase-messaging-sw.js中使用了ES模块的import语法，但Service Worker运行环境不支持该语法，导致脚本评估失败，无法完成注册。

修复方案 #

改用importScripts加载Firebase的兼容版本脚本，同时确保配置参数与项目中的Firebase配置完全一致（替换所有占位符为真实值）：

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

const firebaseApp = firebase.initializeApp({
  apiKey: '你的真实API Key',
  authDomain: '你的真实Auth Domain',
  databaseURL: '你的真实Database URL',
  projectId: '你的真实Project ID',
  storageBucket: '你的真实Storage Bucket',
  messagingSenderId: '你的真实Messaging Sender ID',
  appId: '你的真实App ID',
  measurementId: '你的真实Measurement ID',
});

const messaging = firebase.messaging();

错误二：令牌订阅失败（缺少认证凭证） #

问题原因 #

1. 未正确传入VAPID公钥；
2. firebase-messaging-sw.js中的配置参数使用了占位符，未替换为真实值；
3. Firebase控制台中未为Web应用配置VAPID密钥。

修复方案 #

1. 获取并配置VAPID公钥
   在Firebase控制台进入「项目设置」→「云消息传递」→「Web配置」，生成或复制VAPID公钥，将其存入项目的环境变量VITE__CVT_FIREBASE_PUBLIC_VAPID_KEY。

2. 修正客户端Token获取逻辑
   确保firebaseClient.ts中getToken方法正确传入VAPID密钥，并正确处理Promise：

// firebaseClient.ts 中的 getFCMToken 函数修正
const getFCMToken = async () => {
  try {
    const permission = await Notification.requestPermission();
    if (permission === 'granted') {
      const token = await getToken(messaging, { 
        vapidKey: import.meta.env.VITE__CVT_FIREBASE_PUBLIC_VAPID_KEY 
      });
      console.log('FCM Token:', token);
      return token;
    } else if (permission === 'denied') {
      console.log('通知权限已拒绝');
    }
  } catch (error) {
    console.error('获取FCM Token失败:', error);
  }
};

// 调用时正确处理异步
getFCMToken().then(token => console.log('getFCMToken结果:', token));

3. 确保配置一致性
   检查firebase-messaging-sw.js中的所有Firebase配置参数，必须与firebaseClient.ts中的firebaseConfig完全一致，不能使用占位符。

额外注意事项 #

• 生产环境必须使用HTTPS协议，FCM无法在HTTP环境下正常工作（localhost开发环境例外）；
• 确认Firebase控制台中已为当前Web应用启用云消息传递服务；
• 确保项目中安装的firebase版本与firebase-messaging-sw.js中加载的版本一致（你的项目中是9.17.2）。

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