什么是浏览器的 Notification ？
Notification 是浏览器提供的一种允许网页向用户显示系统通知的机制，这种系统通知是在顶级浏览上下文视口之外，因此即使用户已经切换标签页或移动到不同的应用程序，也可以显示，并且 Notification 相关的 API 被设计成与不同平台上的现有通知系统兼容。
如何使用 Notification ？
使用Notification可以发送页面外部显示的桌面通知，即使浏览器在后台运行也可以向用户发出消息。要显示一个系统通知，一般需要分成两步：用户授予显示通知的权限、发送系统通知。
1、检查权限
发送通知需要用户授权，通过只读属性 Notification.permission 获取是否有权限，其属性值有
- granted：用户已明确授权显示通知的权限
- denied：用户已明确拒绝显示通知的权限
- default：用户还未被询问是否授权
2、申请权限
Notification.requestPermission((res) => {
console.log(res) // granted、denied、default
})3、创建通知
通过 new Notification("title", options) 创建一条通知，使用 options 对通知做一些自定义设置，包含
- body: 通知的正文，显示在标题下方
- tag：定义通知的标识，相同 tag 的通知正在显示的内容会被替换，已经自动关闭的会被替换不再弹出
- icon：通知图标的 URL
- image：通知中图像的 URL
- renotify：重复的 tag 是否再次通知，默认 false 不重复通知
- requireInteraction：是否强制手动关闭，默认 false 会自动关闭
- silent：是否静音，默认 false 会有提示声音
当通知创建后会被立即显示出来，过一段时间会自动关闭，包含 4 个事件
- onshow：当通知显示给用户时触发
- onclick：当用户点击通知后触发（点击后通知会被关闭）
- onclose：当使用 notice.close.bind(notice) 关闭通知后触发（自动关闭的通知无法触发）
- onerror：当通知无法显示给用户时触发（常见于没有用户没有授权）
Notification.requestPermission((res) => {
if(res !== 'granted') return
let notice = new Notification("title", {
body: 'body',
tag: '111',
icon: './a.png',
image: './a.png',
renotify: false,
requireInteraction: true,
silent: false,
})
notice.onshow = function () {
console.log('show')
setTimeout(notice.close.bind(notice), 5000)
}
notice.onclick = function () {
console.log('click')
}
notice.onclose = function () {
console.log('close')
}
notice.onerror = function () {
console.log('error')
}
})本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！