如何在Firebase Cloud Messaging中重新请求通知权限及取消设备订阅？

刚好我之前处理过类似的FCM权限问题，给你一步步讲清楚怎么操作——FCM的权限一旦授予，浏览器就会记住这个选择，所以要重新看到请求弹窗得拆成两步：先取消设备的FCM订阅，再让浏览器重置权限状态。

1. 取消设备的FCM订阅 #

要让设备不再接收当前项目的FCM推送，你需要先获取当前的FCM令牌，然后调用删除接口：

// 异步函数：取消FCM订阅
async function unsubscribeFromFCM() {
  try {
    const messaging = firebase.messaging();
    // 获取当前设备的FCM令牌
    const currentToken = await messaging.getToken();

    if (currentToken) {
      // 删除令牌，完成取消订阅
      await messaging.deleteToken(currentToken);
      console.log("✅ 已成功取消FCM订阅");
    } else {
      console.log("ℹ️ 当前设备没有绑定FCM令牌，无需取消");
    }
  } catch (error) {
    console.error("❌ 取消订阅时出错:", error);
  }
}

直接调用这个函数，就能解除设备和当前FCM项目的订阅关联了。

2. 重新触发通知权限请求弹窗 #

浏览器一旦记住了权限选择（允许/拒绝），单纯调用messaging.requestPermission()是不会再弹出请求框的。这里有两种解决方式：

方式一：引导用户手动重置浏览器权限 #

不同浏览器的操作路径略有差异，你可以在页面上给用户明确提示：

• Chrome/Edge：点击地址栏左侧的🔒图标 → 选择「通知」→ 切换为「询问」→ 刷新页面
• Firefox：点击地址栏左侧的🔒图标 → 「权限」选项 → 找到「通知」→ 改成「询问」

用户完成操作后刷新页面，你的requestPermission()代码就会再次触发权限请求弹窗了。

方式二：代码中检查权限状态并引导 #

你可以先判断当前的权限状态，再给用户对应提示：

// 检查权限并尝试重新请求
async function checkAndReRequestPermission() {
  const messaging = firebase.messaging();
  const permissionStatus = Notification.permission;

  switch(permissionStatus) {
    case 'granted':
      alert("请先在浏览器设置中把通知权限改为「询问」，刷新页面后即可重新请求");
      break;
    case 'denied':
      alert("通知权限已被拒绝，请在浏览器设置中修改为「询问」后重试");
      break;
    default:
      // 权限未决定，直接发起请求
      await messaging.requestPermission();
      // 请求成功后获取新的FCM令牌
      const newToken = await messaging.getToken();
      console.log("🔑 新的FCM令牌已生成:", newToken);
  }
}

注意事项 #

就算你取消了FCM订阅，如果浏览器的通知权限还是「允许」状态，下次访问时requestPermission()依然不会弹窗——必须让浏览器把权限状态改回「询问」，才能重新触发请求。

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