集成Firebase Cloud Messaging后ReactJS PWA无法在脸书/Instagram内置浏览器打开

问题场景 #

在ReactJS搭建的PWA里集成Firebase Cloud Messaging（FCM）后，发现脸书和Instagram的内置浏览器无法打开应用。之前为解决Safari白屏问题，添加了一段浏览器检测代码：

if (
  navigator.userAgent.indexOf("Safari") != -1 &&
  navigator.userAgent.indexOf("Chrome") == -1
) {
  console.log("Using Safari");
  app = firebase.initializeApp(firebaseConfig);
  facebook = new firebase.auth.FacebookAuthProvider();
  google = new firebase.auth.GoogleAuthProvider();
  const appCheck = firebase.appCheck();
  bd = app.firestore();
  archivos = app.storage();
} else {
  console.log("Not using Safari");
  app = firebase.initializeApp(firebaseConfig);
  facebook = new firebase.auth.FacebookAuthProvider();
  google = new firebase.auth.GoogleAuthProvider();
  const appCheck = firebase.appCheck();
  bd = app.firestore();
  archivos = app.storage();
  messaging = firebase.messaging();
}

问题根源 #

1. 脸书/Instagram的内置浏览器属于Chrome衍生环境，UA包含Chrome标识，会进入else分支执行FCM初始化，但这类浏览器不支持FCM依赖的Service Worker或推送API，初始化报错直接导致页面崩溃。
2. 代码存在大量冗余，重复初始化Firebase核心服务，不仅增加维护成本，还可能触发重复初始化的报错。

解决办法 #

优化浏览器检测逻辑，跳过不支持FCM的环境，抽离公共代码减少冗余，并添加异常捕获防止页面崩溃：

// 检测纯Safari（排除Chrome内核伪装的Safari）
const isPureSafari = navigator.userAgent.indexOf("Safari") !== -1 && navigator.userAgent.indexOf("Chrome") === -1;
// 检测脸书/Instagram内置浏览器
const isFBOrIGInApp = navigator.userAgent.includes("FBAN") || navigator.userAgent.includes("FBAV") || navigator.userAgent.includes("Instagram");

// 统一初始化公共Firebase服务
app = firebase.initializeApp(firebaseConfig);
facebook = new firebase.auth.FacebookAuthProvider();
google = new firebase.auth.GoogleAuthProvider();
const appCheck = firebase.appCheck();
bd = app.firestore();
archivos = app.storage();

// 仅在支持FCM的环境初始化消息服务
if (!isPureSafari && !isFBOrIGInApp) {
  console.log("初始化FCM服务");
  try {
    messaging = firebase.messaging();
    // 此处添加FCM后续配置（如请求通知权限、设置消息处理逻辑等）
  } catch (err) {
    console.error("FCM初始化失败:", err);
  }
} else {
  console.log("当前浏览器不支持FCM，跳过初始化");
}

补充说明 #

• 脸书内置浏览器UA通常带有FBAN（Facebook Android）或FBAV（Facebook App版本）标识，Instagram内置浏览器UA直接包含Instagram，通过这些标识可精准识别。
• 抽离公共初始化逻辑，避免多次调用initializeApp引发的错误。
• 添加try-catch捕获FCM初始化异常，即使遇到其他未知受限浏览器，也不会导致页面白屏或崩溃。

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