如何检测Edge浏览器自动阻止通知的状态？

针对Edge 112+版本中pushManager.subscribe无响应的问题，可通过权限预检查+订阅超时检测的组合方案识别浏览器自动阻止通知的情况，具体实现如下：

核心思路 #

Edge 112+在自动阻止通知时，会让subscribe请求一直处于pending状态（既不resolve也不reject），同时通知权限仍显示为default（未授权）。我们可以：

1. 主动查询通知权限状态，快速处理已授权/已拒绝的场景；
2. 给subscribe请求添加超时限制，超时则判定为浏览器自动阻止通知。

具体实现代码 #

async function subscribeWithTimeout(worker, options, timeoutMs = 5000) {
  // 第一步：查询当前通知权限状态
  const permissionStatus = await navigator.permissions.query({ name: 'notifications' });

  if (permissionStatus.state === 'granted') {
    return worker.pushManager.subscribe(options);
  }

  if (permissionStatus.state === 'denied') {
    throw new Error('通知权限已被拒绝');
  }

  // 第二步：权限为default时，执行带超时的订阅请求
  const subscribePromise = worker.pushManager.subscribe(options);
  const timeoutPromise = new Promise((_, reject) => {
    setTimeout(() => {
      reject(new Error('subscribe_timeout'));
    }, timeoutMs);
  });

  try {
    return await Promise.race([subscribePromise, timeoutPromise]);
  } catch (error) {
    if (error.message === 'subscribe_timeout') {
      throw new Error('edge_auto_block');
    }
    throw error;
  }
}

// 调用示例
try {
  const sub = await subscribeWithTimeout(worker, {
    userVisibleOnly: true,
    applicationServerKey: key
  });
  // 订阅成功，执行后续逻辑
  return sub;
} catch (error) {
  if (error.message === 'edge_auto_block') {
    // 提示用户手动开启权限
    alert('检测到Edge浏览器已自动阻止通知，请点击地址栏右侧的通知图标，手动开启权限后重试');
  } else if (error.message === '通知权限已被拒绝') {
    alert('通知权限已被拒绝，请在浏览器设置中开启');
  } else {
    console.error('订阅失败：', error);
  }
}

补充说明 #

• 超时时间建议设置为3-5秒，既避免误判用户正常的犹豫操作，又能及时识别浏览器的静默阻止行为；
• navigator.permissions.query是现代浏览器支持的API，Edge 112+完全兼容，可准确获取权限状态；
• 无需依赖浏览器版本检测，超时机制能适配Edge后续版本的行为变化。

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