Notification API 是浏览器提供的系统级通知接口,需用户授权且仅限 HTTPS 或 localhost 环境;先调用 requestPermission() 获取许可,再用 new Notification() 创建通知,注意兼容性与频率限制。

Notification API 是浏览器提供的一套接口,用来在用户设备上显示系统级通知(即使网页不在前台也能弹出)。它不依赖第三方服务,但需要用户明确授权,且只在 HTTPS 环境或 localhost 下可用。
用户授权是前提
浏览器默认禁止自动发送通知,必须先请求用户许可:
- 调用
Notification.requestPermission()弹出权限提示框 - 返回值是
"granted"、"denied"或"default"(未选择) - 建议在用户有明确意图时再请求(比如点击“开启提醒”按钮),避免被直接拒绝
创建并显示通知
权限获得后,用 new Notification(title, options) 创建通知实例:
-
title是必填的字符串,显示为通知标题 -
options可选对象,常用字段包括:
•body:正文内容
•icon:图标 URL(建议 192×192 或 512×512 PNG)
•badge:小徽章图标(用于桌面通知栏聚合)
•tag:唯一标识符,相同 tag 的新通知会替换旧通知
简单示例代码
把下面代码放在按钮点击事件里运行(确保已启用 HTTPS):
立即学习“Java免费学习笔记(深入)”;
if (Notification.permission === "granted") {
new Notification("你好", {
body: "这是一条测试通知",
icon: "/icon.png"
});
} else if (Notification.permission !== "denied") {
Notification.requestPermission().then(permission => {
if (permission === "granted") {
new Notification("你好", { body: "授权成功!" });
}
});
}
注意事项和限制
不是所有环境都支持,使用前最好检查:
- 判断
"Notification" in window是否存在 - 移动端 Chrome / Safari 支持有限(iOS Safari 完全不支持 Notification API)
- 通知不会自动重试,也不保证 100% 展示(系统可能静音、折叠或拦截)
- 不要频繁触发,否则容易被用户屏蔽,甚至被浏览器标记为骚扰
基本上就这些。核心就是:先要授权,再发通知,注意兼容性和用户体验。











