本地开发React应用：FCM浏览器推送是否需Firebase CLI？

核心结论：本地开发测试FCM浏览器推送通知，不需要必须使用Firebase CLI运行应用，唯一的硬性要求是通过HTTPS访问应用。你遇到的“收到FCM响应但不显示通知”问题，根源在于service worker的配置或注册环节，而非是否使用Firebase CLI。

问题原因分析 #

你提到用firebase serve能正常显示通知，但自行搭建的HTTPS服务不行，本质是Firebase CLI默认帮你做好了FCM依赖的关键配置：

• 自动将firebase-messaging-sw.js放在正确的根路径，保证service worker的作用域覆盖整个应用
• 自动处理了service worker与FCM SDK的关联逻辑

而你自行搭建的HTTPS服务，大概率在以下环节出了问题：

1. Service Worker路径错误：firebase-messaging-sw.js必须放在应用的根目录（比如https://localhost:3000/firebase-messaging-sw.js能直接访问），或者注册时显式指定正确的作用域。
2. Service Worker未正确关联FCM：初始化FCM时，必须将其绑定到已注册的service worker实例，否则无法触发通知展示逻辑。
3. Service Worker逻辑缺失：后台消息的通知展示需要在firebase-messaging-sw.js中编写onBackgroundMessage回调，调用self.registration.showNotification来弹出通知。

解决方案与排查步骤 #

1. 确保Service Worker配置正确 #

检查你的firebase-messaging-sw.js文件，确保包含以下核心逻辑：

import { initializeApp } from "firebase/app";
import { getMessaging, onBackgroundMessage } from "firebase/messaging/sw";

// 替换为你的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"
};

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

onBackgroundMessage(messaging, (payload) => {
  const notificationTitle = payload.notification?.title || "新通知";
  const notificationOptions = {
    body: payload.notification?.body || "您有一条新消息",
    icon: "/path-to-your-icon.png"
  };

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

2. 正确注册Service Worker并关联FCM #

在React应用的主入口（比如index.js或App.js）中，确保注册service worker并绑定到FCM：

import { initializeApp } from "firebase/app";
import { getMessaging, useServiceWorker } from "firebase/messaging";

const firebaseConfig = {/* 你的Firebase配置 */};
const app = initializeApp(firebaseConfig);
const messaging = getMessaging(app);

// 注册service worker
navigator.serviceWorker.register("/firebase-messaging-sw.js")
  .then((registration) => {
    // 将FCM与service worker关联
    useServiceWorker(messaging, registration);
  })
  .catch((err) => console.error("Service Worker注册失败:", err));

3. 验证本地HTTPS服务的正确性 #

不用Firebase CLI的话，你可以用这些方式搭建符合要求的本地HTTPS服务：

• React项目：在项目根目录创建.env文件，添加HTTPS=true，然后执行npm start，React会自动生成自签名证书启动HTTPS服务。
• 生成可信本地证书：用mkcert工具生成本地可信SSL证书，配置到你的开发服务器（比如nginx、webpack-dev-server）中，避免浏览器的安全警告。

4. 浏览器端排查 #

打开浏览器开发者工具的「Application」标签：

• 查看「Service Workers」面板，确认firebase-messaging-sw.js已激活（状态为activated），且作用域覆盖你的应用域名。
• 勾选「Update on reload」和「Bypass for network」，强制刷新页面，确保service worker更新到最新版本。
• 切换到「Background Page」（service worker的控制台），查看是否有初始化错误或消息处理报错。

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