React TS集成FCM遇PushManager订阅失败：无激活Service Worker

问题场景 #

在React TypeScript项目中集成Firebase Cloud Messaging（FCM），已完成Service Worker注册、通知权限获取、VAPID密钥配置等操作，且项目基于HTTPS运行，但调用getToken时仍持续报错：

Error requesting notification permission: AbortError: Failed to execute 'subscribe' on 'PushManager': Subscription failed - no active Service Worker

环境配置 #

• Firebase v10.12.5
• @firebase/messaging v0.12.0
• 测试浏览器：Chrome

已尝试的解决方法 #

• 先注册Service Worker再请求权限
• 注册新SW前注销现有实例
• 添加延迟确保SW激活
• 显式等待SW完成激活
• 在getToken选项中传入serviceWorkerRegistration
• 验证VAPID密钥与Firebase控制台一致

针对性解决步骤 #

1. 确认Service Worker文件路径与命名规范 #

FCM要求Service Worker必须命名为firebase-messaging-sw.js，且放置在项目根目录（与index.html同级）。若路径或名称不符，即使SW注册成功，FCM也无法识别关联的激活实例。

2. 显式绑定已激活的SW实例到FCM #

调用getToken时，主动获取已激活的Service Worker注册实例并传入配置，避免依赖FCM自动查找：

export const initializeFirebaseMessaging = async (userId: string) => {
  try {
    const permission = await Notification.requestPermission();
    if (permission !== 'granted') return null;

    // 等待Service Worker完全激活
    const swRegistration = await navigator.serviceWorker.ready;
    const token = await getToken(messaging, {
      vapidKey: 'BKmNHKgwl3VZkAshy4pkdqhx61a30hR413VTNTwRf_iG6TYirtnnpphoUASsunAB5gwwBLvlAzHTXzdVriWGKw',
      serviceWorkerRegistration: swRegistration
    });

    // Token处理逻辑...
  } catch (error) {
    console.error('Error:', error);
    return null;
  }
};

3. 检查Service Worker的Scope范围 #

注册SW时，确保scope设置为根路径'/'，否则FCM推送事件无法被SW捕获：

// Service Worker注册代码示例
navigator.serviceWorker.register('/firebase-messaging-sw.js', { scope: '/' })
  .then(registration => {
    console.log('Service Worker注册成功，Scope:', registration.scope);
  })
  .catch(err => console.error('Service Worker注册失败:', err));

4. 强制激活Service Worker #

在Chrome DevTools的Application > Service Workers面板中：

• 确认SW状态为Activated且Running
• 若SW处于Waiting状态，点击SkipWaiting按钮强制激活新实例

5. 严格控制初始化顺序 #

必须先完成SW注册并等待其激活，再初始化Firebase Messaging，避免FCM在SW就绪前尝试订阅：

// 等待Service Worker激活的工具函数
const waitForSWActivation = async (): Promise<ServiceWorkerRegistration> => {
  const registration = await navigator.serviceWorker.register('/firebase-messaging-sw.js', { scope: '/' });
  
  // 若SW已激活，直接返回
  if (registration.active) return registration;

  // 监听SW激活事件
  return new Promise(resolve => {
    const listener = () => {
      if (registration.active) {
        registration.removeEventListener('updatefound', listener);
        resolve(registration);
      }
    };
    registration.addEventListener('updatefound', listener);
  });
};

// 完整FCM初始化流程
export const initializeFCM = async (userId: string) => {
  try {
    const swRegistration = await waitForSWActivation();
    const permission = await Notification.requestPermission();
    
    if (permission !== 'granted') return null;

    // 初始化Firebase（确保已配置firebaseConfig）
    const app = initializeApp(firebaseConfig);
    const messaging = getMessaging(app);

    const token = await getToken(messaging, {
      vapidKey: '你的VAPID密钥',
      serviceWorkerRegistration: swRegistration
    });

    // 处理获取到的令牌...
    return token;
  } catch (error) {
    console.error('FCM初始化失败:', error);
    return null;
  }
};

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