JavaScript 中 BOM 怎么使用 Notification API 在浏览器发送桌面通知-js教程-PHP中文网

使用 notification api 发送桌面通知需先获用户授权且仅限 https 或 localhost 环境；通过 notification.permission 检查状态，用 notification.requestpermission() 请求权限（须由用户手势触发），授权后以 new notification(title, options) 创建通知，支持 body、icon 等选项并可监听 onclick 事件。

javascript 中 bom 怎么使用 notification api 在浏览器发送桌面通知

要在浏览器中使用 Notification API 发送桌面通知，关键不是靠 BOM（Browser Object Model）直接调用，而是通过 Notification 接口 —— 它属于 Web API，由浏览器提供，但需要用户授权且仅在安全上下文（https 或 localhost）中可用。

检查权限并请求授权

首次使用前必须获取用户许可。不能跳过权限检查，否则通知会静默失败。

用 Notification.permission 查看当前状态："granted"、"denied" 或 "default"（未选择）
调用 Notification.requestPermission() 弹出授权提示（只能由用户手势触发，比如点击按钮）
避免在页面加载时自动调用 requestPermission —— 多数浏览器会忽略或屏蔽

创建并显示通知

权限获得后，用 new Notification(title, options) 实例化通知对象。

Alibabacloud Sdk Client Initialization For Java

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

下载

title 是必填字符串，显示在通知标题栏
options 可选，常用字段包括：
body：正文文本
icon：图标 URL（建议 192×192 或 512×512 PNG）
badge：小图标（用于 Android 或 PWA）
data：自定义数据（如跳转链接），不显示但可在事件中读取
通知默认显示几秒后自动关闭，也可监听 onclick 做交互（例如聚焦窗口或跳转页面）

处理常见限制与兼容性

不是所有环境都支持 Notification API：

仅在 https 站点或 localhost 下生效（HTTP 页面会被拒绝）
Safari 从 16.4 起支持，但需在「设置 > 通知」中手动开启网站权限
部分浏览器（如 Firefox 移动版）不支持桌面通知
若用户已拒绝权限，requestPermission() 不再弹窗，需引导用户手动修改设置

简单可用示例代码

把以下代码放在按钮点击事件里运行：

document.getElementById('notifyBtn').addEventListener('click', () => {
  if (Notification.permission === 'granted') {
    new Notification('你好！', {
      body: '这是一条桌面通知',
      icon: '/icon.png'
    });
  } else if (Notification.permission !== 'denied') {
    Notification.requestPermission().then(status => {
      if (status === 'granted') {
        new Notification('授权成功', { body: '通知已发送' });
      }
    });
  }
});

注意：不要在页面初始化时执行 requestPermission；确保 icon 路径可访问；生产环境建议加 try/catch 防止 API 不可用时报错。