React项目因homepage/basename致Firebase消息ServiceWorker注册失败求助

问题原因 #

React项目配置了homepage或basename后，默认的Firebase Messaging Service Worker注册路径与实际文件位置不匹配，导致firebase-messaging-sw.js返回404，无法完成注册，进而触发Token获取失败。

解决步骤 #

• 手动指定Service Worker注册路径
  不要使用默认的registerDefaultSw方法，改为手动注册Service Worker并关联到FCM：

  import { getMessaging, getToken } from "firebase/messaging";
  
  const messaging = getMessaging();
  
  async function initFCM() {
    // 根据你的homepage配置自动适配路径
    const swUrl = `${process.env.PUBLIC_URL}/firebase-messaging-sw.js`;
    const swRegistration = await navigator.serviceWorker.register(swUrl, {
      scope: `${process.env.PUBLIC_URL}/firebase-cloud-messaging-push-scope/`
    });
    
    // 通过已注册的sw获取Token
    const token = await getToken(messaging, { serviceWorkerRegistration: swRegistration });
    console.log("获取到FCM Token:", token);
  }
  
  initFCM();
  

  注：process.env.PUBLIC_URL会自动匹配你在package.json中设置的homepage值，无需硬编码路径。

• 确认文件位置
  确保firebase-messaging-sw.js放在React项目的public根目录下，与index.html同级，这样打包后文件会被部署到静态资源根路径，能被正确访问。

• 适配子路径配置
  如果你的项目部署在子路径（比如https://example.com/my-app），package.json中设置了"homepage": "/my-app"，上述代码会自动通过PUBLIC_URL适配路径，无需额外修改。

• 本地验证
  启动开发服务器后，直接访问http://localhost:3000/firebase-messaging-sw.js（如果是子路径则访问http://localhost:3000/my-app/firebase-messaging-sw.js），确认能正常加载文件，否则检查public目录结构或重启开发服务。

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