Firebase FCM在JavaScript中无法获取通知权限问题求助

问题场景 #

按照Firebase官方codelab实现FCM云消息推送，但遇到无法获取通知权限的问题，无法正常发送云消息。相关代码如下：

设备令牌获取与权限请求代码 #

async function saveMessagingDeviceToken() {
  try {
    const currentToken = await getToken(getMessaging());
    if (currentToken) {
      console.log('Got FCM device token:', currentToken);
      // Saving the Device Token to Cloud Firestore.
      const tokenRef = doc(getFirestore(), 'fcmTokens', currentToken);
      await setDoc(tokenRef, { uid: getAuth().currentUser.uid });

      // This will fire when a message is received while the app is in the foreground.
      // When the app is in the background, firebase-messaging-sw.js will receive the message instead.
      onMessage(getMessaging(), (message) => {
        console.log(
          'New foreground notification from Firebase Messaging!',
          message.notification
        );
      });
    } else {
      // Need to request permissions to show notifications.
      requestNotificationsPermissions();
    }
  } catch(error) {
    console.error('Unable to get messaging token.', error);
  };
}
// Requests permissions to show notifications.
async function requestNotificationsPermissions() {
  console.log('Requesting notifications permission...');
  const permission = await Notification.requestPermission();
  
  if (permission === 'granted') {
    console.log('Notification permission granted.');
    // Notification permission granted.
    await saveMessagingDeviceToken();
  } else {
    console.log('Unable to get permission to notify.');
  }
}

FCM服务worker配置代码 #

import { initializeApp } from 'firebase/app';
import { getMessaging } from 'firebase/messaging/sw';
import { getFirebaseConfig } from './firebase-config';

const firebaseApp = initializeApp(getFirebaseConfig());
getMessaging(firebaseApp);
console.info('Firebase messaging service worker is set up');

已确认函数在index文件中正确初始化，以下是关键排查点：

• 权限请求必须触发用户交互：现代浏览器禁止页面自动请求通知权限，Notification.requestPermission()必须绑定到用户主动操作（比如按钮点击事件）。如果代码是在页面加载时自动调用saveMessagingDeviceToken()，会导致权限请求被浏览器拦截，无法弹出授权框。

• 检查VAPID密钥配置：调用getToken()时需要传入VAPID公钥，这一步很容易遗漏。确保初始化Messaging时配置了VAPID密钥：

  import { getMessaging, getToken } from "firebase/messaging";
  
  const messaging = getMessaging();
  const currentToken = await getToken(messaging, {
    vapidKey: "你的VAPID公钥"
  });
  

  公钥可在Firebase控制台的「项目设置」→「云消息传递」→「Web配置」中获取。

• 验证Service Worker的有效性：

  1. 确认Service Worker文件（firebase-messaging-sw.js）放在网站根目录，否则浏览器可能无法注册。
  2. 检查浏览器控制台的「Application」→「Service Workers」面板，确认该Worker已成功注册且无报错。
  3. 确保在主应用代码中正确注册Service Worker，而不仅仅是在Worker文件中初始化FCM。

• 浏览器权限状态与隐私设置：

  1. 手动检查浏览器的通知权限设置，确认该网站的权限不是「拒绝」状态（如果是，需要用户手动在浏览器设置中修改）。
  2. 避免在隐私模式/无痕窗口中测试，部分浏览器在隐私模式下会限制通知权限和Service Worker功能。

• 查看具体错误日志：
  打开浏览器控制台，查看saveMessagingDeviceToken()捕获到的具体错误信息，getToken()抛出的错误通常会明确指出问题原因（比如权限不足、VAPID密钥错误等）。

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