Chrome中Web Notifications API通知不显示问题求助

针对你遇到的Chrome 122（含Edge）中Web通知触发show事件却不弹出的问题，结合你已做的排查，补充以下可能的原因及解决步骤：

1. 系统级应用通知权限未开启 #

即使浏览器内网站权限设为允许，系统层面可能限制了Chrome/Edge的通知权限：

• Windows：打开「设置」→「系统」→「通知」，找到谷歌浏览器/Edge，确保「允许通知」开关开启，且「通知横幅」「通知中心」等选项未被禁用。
• Mac：打开「系统设置」→「通知」，选择谷歌浏览器/Edge，确认「允许通知」勾选，且「显示通知横幅」「在通知中心显示」等选项处于启用状态。

2. Chrome/Edge全局通知设置异常 #

检查浏览器全局通知配置，避免被静音或隐藏：

• 打开chrome://settings/content/notifications（Edge为edge://settings/content/notifications）：
  • 确认「默认行为」设置为「允许网站发送通知」；
  • 检查是否开启了「专注模式」或「静音通知」，这类设置会让通知仅进入中心而不弹出；
  • 确认localhost条目确实在「允许」列表中，且未被设置为「静音」。

3. 浏览器或系统进程异常 #

通知服务进程可能出现卡顿：

• 完全关闭Chrome/Edge（包括后台进程）后重新打开测试；
• 重启电脑，重置系统通知服务状态。

4. 第三方安全软件拦截 #

部分杀毒、防火墙或系统优化软件会拦截浏览器通知弹出：

• 暂时关闭第三方安全软件，测试通知是否正常显示；
• 若恢复正常，在安全软件中添加Chrome/Edge的通知权限白名单。

5. 测试简化版通知代码 #

尝试去掉setTimeout，直接创建通知，排除异步延迟导致的异常：

Notification.requestPermission().then(permission => {
  if (permission === 'granted') {
    const notification = new Notification('测试标题', { 
      body: '测试内容',
      icon: 'https://example.com/icon.png' // 可选，添加图标测试兼容性
    });
    notification.addEventListener('show', () => console.log('通知触发'));
  }
});

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