React JS应用中iOS端Notification.requestPermission()无法正常工作求助

我正在开发第一个React JS应用，基于之前完成的JS应用改造，需要向用户请求通知权限。原JS应用在iOS端能正常工作，但React应用仅安卓和Web端正常，iOS端无法获取权限。

已尝试的代码 #

const requestPermission = () => {
    return new Promise((resolve, reject) => {
        if (!("Notification" in window)) {
            alert("Notifications are not available on this device.");
            reject();
            return;
          }
      
        
      Notification.requestPermission()
        .then(async () => {
          const token = await getFCMToken();
          resolve(token);
          window.location.reload(true);
        })
        .catch((err) => {
          alert("You've blocked the notifications. Please check your browser settings");
          reject(err);
        });
    });
  };


if(Notification.permission==="granted"){
    showFCMToken();
}

尝试过messaging.requestPermission()，但提示该方法不存在。

Firebase配置 #

import { initializeApp } from "firebase/app";
import { getMessaging, getToken } from "firebase/messaging";
import { getDatabase, ref } from "firebase/database";

const firebaseConfig = {
    ...
};


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

解决要点 #

• 用户交互触发权限请求：iOS网页端要求通知权限请求必须由用户主动操作（比如点击按钮）触发，不能在页面加载时自动调用。把requestPermission绑定到按钮点击事件上，不要在组件挂载时直接执行。
• 正确使用Firebase Token获取逻辑：新版Firebase Messaging已移除messaging.requestPermission()，需先通过原生Notification.requestPermission()获取权限，再调用getToken，且iOS必须配置VAPID密钥：

  const getFCMToken = async () => {
    try {
      const token = await getToken(messaging, { vapidKey: "你的VAPID公钥" });
      return token;
    } catch (err) {
      console.error("Token获取失败:", err);
    }
  };
  

• 移除不必要的页面刷新：权限获取后立即刷新页面可能导致iOS端权限状态未同步，建议去掉window.location.reload(true)，或在token确认获取后再执行。
• 确保HTTPS环境：iOS仅允许HTTPS网站请求通知权限，本地开发可使用HTTPS代理工具测试。

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