Android Chrome中Notification.requestPermission()永久Pending，弹窗不显示求助

可能的原因 #

• Chrome的权限触发规则限制：Android Chrome对权限请求有严格的交互要求，只有在用户主动触发的事件（比如点击、触摸）里调用权限请求才会正常弹窗。如果你的代码是在页面自动加载、定时器回调或者非用户触发的异步逻辑里执行，浏览器可能会静默拦截请求，导致Promise一直挂起。
• 权限状态缓存异常：部分场景下，Chrome可能缓存了异常的权限状态，比如之前用户操作异常导致权限请求被中断，或者浏览器进程崩溃后留下的错误缓存，使得新的请求无法触发弹窗。
• 系统或浏览器的后台限制：Android的省电模式、后台应用冻结策略，或者Chrome自身的后台刷新限制，会阻止权限弹窗在应用后台状态下显示，进而导致请求挂起。
• 第三方插件或隐私设置干扰：广告拦截、隐私保护类扩展，或者用户在Chrome中设置了严格的隐私权限，会自动拦截通知权限请求，让Promise处于pending状态。

解决办法 #

• 绑定到用户主动交互事件：必须把Notification.requestPermission()的调用放在明确的用户操作回调里，比如按钮点击事件，示例代码：

document.getElementById('enable-notify-btn').addEventListener('click', async () => {
  try {
    const status = await Notification.requestPermission();
    console.log('权限状态:', status);
  } catch (err) {
    console.error('权限请求失败:', err);
  }
});

• 给请求添加超时处理：避免Promise一直挂起，用Promise.race搭配超时逻辑，超过指定时间就终止等待并提示用户，示例：

async function requestNotifyPermission() {
  const timeout = new Promise((_, reject) => {
    setTimeout(() => reject(new Error('请求超时')), 5000);
  });

  try {
    const status = await Promise.race([
      Notification.requestPermission(),
      timeout
    ]);
    return status;
  } catch (err) {
    alert('通知权限请求超时，请手动在浏览器设置中开启');
    return 'denied';
  }
}

// 在用户点击时调用
document.getElementById('enable-notify-btn').addEventListener('click', requestNotifyPermission);

• 提前检查权限状态：发起请求前先判断当前权限，避免无效请求：

async function checkAndRequest() {
  const currentStatus = Notification.permission;
  if (currentStatus === 'granted') {
    console.log('已经有通知权限');
    return;
  }
  if (currentStatus === 'denied') {
    alert('通知权限已被拒绝，请手动到浏览器设置开启');
    return;
  }
  // 发起请求
  const status = await requestNotifyPermission();
  console.log('请求后权限:', status);
}

• 引导用户手动开启权限：当请求超时或权限被拒绝时，给出清晰的操作指引，比如告诉用户：打开Chrome设置 > 网站设置 > 通知 > 找到你的网站，设置为允许。
• 排查外部干扰：提示用户暂时关闭广告拦截类扩展，或者检查Android系统的省电模式是否限制了Chrome的弹窗功能。

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