Next.js集成FCM报unsupported-browser错误如何解决

这个报错本质是执行FCM初始化代码的环境不满足SDK运行要求，对应到你的Next.js项目，90%以上概率是以下问题：

1. 你在config.js顶层直接调用getMessaging(app)，Next.js服务端渲染阶段会执行这段代码，而Node.js服务端环境没有浏览器提供的Service Worker、Push API、Notification API这些FCM必须的Web API，直接触发不支持浏览器的报错。
2. 剩余小概率情况是你访问页面的浏览器本身不支持上述推送API（比如低版本Safari、部分精简内核的国产套壳浏览器），或者你在非安全上下文（非HTTPS、非localhost的HTTP环境）下访问页面，浏览器禁用了相关API。

• 调整FCM初始化逻辑，禁止在模块顶层直接初始化messaging，改为仅在客户端环境、且浏览器支持相关API时动态初始化
  修改firebase_config/config.js代码如下：

import { initializeApp } from "firebase/app";

const firebaseConfig = {
// 填入你自己的Firebase项目配置
};

// Firebase app实例可以在顶层初始化，服务端客户端均可运行
const app = initializeApp(firebaseConfig);
let messaging = null;

// 导出懒加载获取messaging实例的方法
export const getFCMMessaging = async () => {
// 非浏览器环境直接返回空
if (typeof window === 'undefined') return null;
// 检测当前浏览器是否支持FCM依赖的底层API
const isSupportFCM = 'serviceWorker' in navigator
&& 'PushManager' in window
&& 'Notification' in window;
if (!isSupportFCM) {
console.warn('当前环境不支持FCM推送能力');
return null;
}
// 已初始化过直接返回实例
if (messaging) return messaging;
// 动态导入FCM相关依赖，避免服务端构建/运行报错
const { getMessaging } = await import("firebase/messaging");
messaging = getMessaging(app);
return messaging;
};

export default app;

- 所有FCM相关的调用逻辑，都放到客户端专属的执行时机里，不要在服务端执行的代码块中调用
Pages Router下修改`pages/firebase.js`代码如下，把FCM初始化逻辑放到`useEffect`中（useEffect仅在客户端执行）：
```javascript
import React, { useEffect } from "react";
import { getFCMMessaging } from "../firebase_config/config";

const FirebasePage = () => {
useEffect(() => {
  const initPush = async () => {
    const messaging = await getFCMMessaging();
    if (!messaging) return;
    // 后续在这里补充请求通知权限、获取FCM token、监听前台消息等逻辑
  };
  initPush();
}, []);

return (
  <div>
    <h1>Firebase</h1>
  </div>
);
};

export default FirebasePage;

如果你用的是Next.js App Router，需要在使用FCM逻辑的组件顶部加上'use client'指令，标记为客户端组件。

• 环境配置注意
  • 本地开发时使用localhost访问项目，不要用本地IP访问，非安全上下文下浏览器会禁用推送相关API
  • 线上部署必须为站点配置HTTPS，否则FCM无法正常注册Service Worker
  • 需要在项目public目录下放置firebase-messaging-sw.js服务工作线程文件，否则后台推送无法正常接收

注意：所有getServerSideProps、getStaticProps、服务端组件、API路由里的代码都运行在Node.js环境，绝对不能引入或调用FCM Web SDK相关逻辑。

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