使用 Notification API 发送桌面通知需先获用户授权且仅限 HTTPS 或 localhost 环境；通过 Notification.permission 检查状态，用 Notification.requestPermission() 请求权限（须由用户手势触发），授权后以 new Notification(title, options) 创建通知，支持 body、icon 等选项并可监听 onclick 事件。
要在浏览器中使用 Notification API 发送桌面通知，关键不是靠 BOM（Browser Object Model）直接调用，而是通过 Notification 接口 —— 它属于 Web API，由浏览器提供，但需要用户授权且仅在安全上下文（https 或 localhost）中可用。
检查权限并请求授权
首次使用前必须获取用户许可。不能跳过权限检查，否则通知会静默失败。
- 用
Notification.permission查看当前状态："granted"、"denied"或"default"（未选择） - 调用
Notification.requestPermission()弹出授权提示（只能由用户手势触发，比如点击按钮） - 避免在页面加载时自动调用 requestPermission —— 多数浏览器会忽略或屏蔽
创建并显示通知
权限获得后，用 new Notification(title, options) 实例化通知对象。
-
title是必填字符串，显示在通知标题栏 -
options可选，常用字段包括：
body：正文文本
icon：图标 URL（建议 192×192 或 512×512 PNG）
badge：小图标（用于 Android 或 PWA）
data：自定义数据（如跳转链接），不显示但可在事件中读取 - 通知默认显示几秒后自动关闭，也可监听
onclick做交互（例如聚焦窗口或跳转页面）
处理常见限制与兼容性
不是所有环境都支持 Notification API：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
- 仅在
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 不可用时报错。
