如何使用JavaScript创建Windows通知？已获权限但发送无反应

环境类排查点 #

这类问题80%以上的诱因出在环境权限层面，和代码逻辑无关：

• 双层通知权限未完全开启：仅完成网页端的权限申请是不够的，需要依次检查两层权限设置：
  • Windows系统设置里的通知总开关，以及当前使用的浏览器（Chrome/Edge等）的单独通知权限，确认没有被系统层面拦截
  • 浏览器自身设置里的站点通知总开关，确认没有开启“通知静默”“勿扰模式”类规则——这类规则下通知会被直接收纳进通知中心，不会弹出横幅，很容易被判定为“点击没反应”
• 非安全上下文限制：Notifications API 仅允许在 https:// 协议、localhost 本地调试环境下调用。如果直接以 file:// 协议打开本地HTML文件、或者在纯http的内网地址下调试，哪怕页面显示权限状态为granted，通知逻辑也会被浏览器静默阻断，完全不触发任何动作。
• 系统专注助手拦截：如果Windows开启了专注助手/勿扰模式，所有系统通知都会被暂时收起，不会弹出提示。

代码层面的修复补全 #

原代码存在多处校验缺失，问题触发时没有任何报错提示，被误以为是“点击无响应”，补全后的可运行代码如下：

// 通知权限申请逻辑
document.querySelector('#request').addEventListener('click', () => {
  if (!('Notification' in window)) {
    console.log("当前浏览器不支持通知功能");
    return;
  }
  // 兼容不同浏览器的权限请求写法，同步更新页面的权限状态展示
  Notification.requestPermission().then(permission => {
    document.querySelector('p > span').textContent = permission;
  });
});

// 通知发送逻辑
document.querySelector('#send').addEventListener('click', () => {
  if (!('Notification' in window)) {
    console.log("当前浏览器不支持通知功能");
    return;
  }
  // 发送前二次校验当前真实权限状态，避免权限被浏览器/系统重置后静默失败
  if (Notification.permission !== 'granted') {
    console.log("未获得通知权限，当前状态：", Notification.permission);
    return;
  }
  try {
    // 注意：Windows下的Chromium内核浏览器如果缺失icon配置，大概率会直接拒绝弹出通知
    const notification = new Notification('待办清单', {
      body: "这是测试通知内容",
      // 替换为合法的本地/在线icon路径
      icon: '/your-icon-path.png'
    });
    // 捕获通知触发的静默错误，把失败原因输出到控制台
    notification.onerror = (error) => {
      console.error("通知触发失败，错误详情：", error);
    }
  } catch (err) {
    console.error("通知实例创建异常：", err);
  }
});

快速定位操作步骤 #

• 打开浏览器开发者工具的控制台面板，点击Send按钮查看有没有被原代码吞掉的报错日志
• 检查当前测试站点的通知设置，确认权限不是“静默”状态：如果被设为静默通知，通知只会出现在通知中心列表，不会弹出横幅
• 切换到localhost环境调试：如果当前是直接打开本地HTML文件测试，用本地静态服务把页面跑在127.0.0.1/localhost地址下，排除file协议的权限限制

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