移动端浏览器无法获取FCM Token？React+Firebase项目技术求助

我用React.js + Firebase开发了一个简易网站，PC端Chrome、Firefox、Safari等主流浏览器运行正常，但Android和iPhone的移动端Chrome、Safari里，通知与数据消息功能完全失效。排查后发现核心问题是移动端浏览器无法获取FCM Token，请帮忙判断问题出在代码还是其他环节。

获取FCM Token的代码： #

import { initializeApp } from 'firebase/app';
import { getFirestore, collection, getDocs doc, setDoc} from 'firebase/firestore';
import { getToken, onMessage, getMessaging} from 'firebase/messaging';

const firebaseConfig = {
  apiKey: "********************",
  authDomain: "*********************",
  databaseURL: "******************",
  projectId: "**********************",
  storageBucket: "****************************",
  messagingSenderId: "*********",
  appId: "********************",
  measurementId: "**********"
};

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

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

const getAndSaveFCMToken = async (roomId, role) => {
  try {
    const currentToken = await getToken(messaging, { vapidKey: vapidKey });
    
    if (currentToken) {
      const docRef = doc(db, 'rooms', roomId);
      if(role === 'admin') {
        await updateDoc(docRef, { admin_token: currentToken });
      } else {
        await updateDoc(docRef, { player_tokens: arrayUnion(currentToken)});
      }
      return currentToken;
    } else {
      console.log('No registration token available. Request permission to generate one.');
      return 'Failed to get token!';
    }
  } catch (err) {
    console.log('An error occurred while retrieving token. ', err);
    throw err;
  }
};

代码层面的明显问题： #

• 重复初始化Firebase App：代码里连续两次调用initializeApp(firebaseConfig)，会触发Firebase初始化错误，导致后续Messaging实例异常。
• Firestore导入语法错误：getDocs doc缺少逗号分隔，正确应为getDocs, doc；同时未导入updateDoc和arrayUnion，这两个方法在写入Token时会直接报错。
• VAPID密钥未定义：调用getToken时传入的vapidKey变量未在代码中声明，移动端浏览器无法完成Token生成的身份验证。

移动端特有的非代码因素： #

• 通知权限未主动请求：移动端浏览器对通知权限的限制比PC端严格，必须通过Notification.requestPermission()主动向用户申请授权，未授权状态下无法获取Token。
• HTTPS访问要求：FCM Web推送仅支持HTTPS环境（localhost除外），如果移动端访问的是HTTP站点，浏览器会直接拒绝Token请求。
• Service Worker配置缺失/错误：FCM依赖Service Worker接收推送，移动端浏览器要求Service Worker文件（firebase-messaging-sw.js）必须放在网站根目录，且配置正确（需导入兼容版Firebase脚本并初始化）。
• iOS Safari特殊限制：iOS Safari仅允许添加到主屏幕的PWA应用接收推送通知，普通标签页无法获取FCM Token；同时需要在Firebase控制台配置APNs证书。
• 浏览器版本兼容性：旧版本的Android Chrome（<52）或iOS Safari（<16.4）不支持FCM Web推送特性，需确认用户浏览器版本是否达标。

修复建议： #

1. 修正代码错误：

   • 移除重复的initializeApp调用，共享同一个App实例；
   • 补全Firestore导入：import { getFirestore, collection, getDocs, doc, setDoc, updateDoc, arrayUnion } from 'firebase/firestore';；
   • 从Firebase控制台获取VAPID密钥并定义变量：const vapidKey = "你的VAPID公钥";。

2. 添加权限请求逻辑：
   在调用getAndSaveFCMToken前先请求通知权限：

   const requestPermission = async () => {
     const status = await Notification.requestPermission();
     if (status !== 'granted') {
       throw new Error('用户未授予通知权限');
     }
   };
   // 使用示例：
   await requestPermission();
   await getAndSaveFCMToken(roomId, role);
   

3. 验证Service Worker：
   确保根目录存在firebase-messaging-sw.js，内容示例：

   importScripts('https://www.gstatic.com/firebasejs/9.23.0/firebase-app-compat.js');
   importScripts('https://www.gstatic.com/firebasejs/9.23.0/firebase-messaging-compat.js');
   
   firebase.initializeApp({
     // 你的firebase配置
   });
   
   const messaging = firebase.messaging();
   

4. 适配iOS Safari：
   引导用户将网站添加到主屏幕，并在Firebase控制台完成APNs证书配置（需苹果开发者账号）。

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