使用 Notification API 发送系统通知需满足 HTTPS（或 localhost）及用户授权，先检查 Notification.permission 状态，再通过用户手势调用 requestPermission() 申请，获准后用 new Notification(title, options) 创建并显示，支持 onclick 等事件监听，但需注意 Safari 和移动端兼容性限制。

要在浏览器中用 JavaScript 发送系统通知，核心是使用 Notification API，但必须满足两个前提：页面是 HTTPS（或 localhost），且用户已授权通知权限。

检查并请求通知权限

首次使用前需向用户申请权限。不能直接发送通知，否则会被静默忽略。

• 用 Notification.permission 查看当前状态（"granted"、"denied" 或 "default"）
• 调用 Notification.requestPermission() 弹出授权提示——这个操作必须由用户手势（如点击按钮）触发，不能在页面加载时自动执行
• 示例：
  

  button.addEventListener('click', () => {
    if (Notification.permission === 'granted') {
      showNotification();
    } else if (Notification.permission !== 'denied') {
      Notification.requestPermission().then(status => {
        if (status === 'granted') showNotification();
      });
    }
  });

创建并显示通知

权限获得后，用 new Notification(title, options) 创建通知实例。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

• title 是必填项，显示在通知标题栏
• options 可选对象，常用字段包括：
  • body：正文文字
  • icon：图标 URL（建议使用绝对路径或 data URL）
  • badge：小图标（用于桌面通知角标）
  • tag：唯一标识符，相同 tag 的新通知会替换旧通知
  • silent：是否禁用声音（默认 false）
• 注意：Chrome 等浏览器对频繁通知有限制，同一标签页短时间内重复调用可能被合并或屏蔽

监听通知事件与交互

可以响应用户点击、关闭或展示完成等行为，提升体验。

立即学习“Java免费学习笔记（深入）”；

• onclick：用户点击通知时触发（常用于跳转页面）
• onshow：通知成功显示后触发
• onclose：用户手动关闭或超时自动关闭后触发
• onerror：显示失败时触发（比如权限被拒后仍尝试创建）
• 示例：
  

  const n = new Notification('消息提醒', {
    body: '你有一条新通知',
    icon: '/icon.png'
  });
  n.onclick = () => window.focus();

兼容性与注意事项

Notification API 在现代主流浏览器中支持良好（Chrome、Firefox、Edge、Safari 16.4+），但仍有细节差异。

• Safari 需要先在「系统设置 → 通知」中为 Safari 手动开启网站通知权限，且不支持 icon 和 badge
• 移动端浏览器（尤其是 iOS Safari）基本不支持该 API，应做好降级处理（如用 toast 提示）
• 不要依赖通知作为关键信息传达方式——它可能被拦截、延迟或用户完全关闭
• 避免滥用：非必要不频繁触发，尊重用户注意力和设置偏好