这是我参与8月更文挑战的第18天，活动详情查看：8月更文挑战
前言
HTML5新增了Notification API，这个API主要是用来显示桌面通知的。
之前在项目里用了一下，刚好把它总结下，算是加深印象，也方便下次查阅。
Notification
语法
它是一个构造函数，所以使用new来生成实例
const notification = new Notification(title, options)
生成的实例有个方法，notification.close()，调用会关闭桌面通知。
桌面通知会在显示几秒后自动关闭(默认情况下)。
参数解析：
-
title
桌面通知的显示标题，string类型，必填
-
options
桌面通知的配置选项，object类型，可选
-
dir
文字的方向，值有
auto(自动，默认值)，ltr(从左到右)，rtl(从右到左) -
body
通知显示的额外字符串
-
icon
图标地址，string类型，通知显示的icon
-
image
通知的背景图像地址，string类型
-
tag
标签，string类型或者number类型。标记当前的桌面通知
-
renotify
新通知是否会覆盖旧通知，默认是
false，不会覆盖如果设置了renotify为
true，则tag也要设置。 -
requireInteraction
是否自动关闭通知，默认为
false, 自动关闭通知(一般间隔几秒后关闭)
-
构造函数Notification上的属性：
-
permission
是否允许显示桌面通知，有以下值：
-
granted
用户允许显示
-
denied
用户禁止显示
-
default
用户还没选择，表现和
denied一样，不显示桌面通知
-
构造函数Notification上的方法(生成实例后实例也会继承)：
-
requestPermission
申请桌面通知的权限，返回一个promise对象，then方法的回调参数代表的用户是否允许显示桌面通知，
granted（允许），denied（禁止），default(未选择，等同denied) -
onclick
点击桌面通知会触发
-
onshow
桌面通知显示会触发
-
onerror
桌面通知出现错误时会触发
-
onclose
桌面通知关闭时触发
显示的过程
- 我们首先要先请求用户显示桌面通知权限
- 如果用户选择允许，则调用api显示桌面通知
- 如果用户选择禁止或者不选择，则无法显示桌面通知
- 一旦选择权限了，后续无需再次选择
- 如果想重新更改选择，可以点击域名左边的小icon，切换选择
需要注意的问题
- 需要在域名的协议是
https下才会生效。 - 这个通知一旦显示，则跟浏览器脱离了，浏览器关闭它也可以不关闭。
- 设置了tag，而且tag一样的通知，在一段时间内只会出现一次
例子演示
function showNotificationFn() {
if (window.Notification) {
Notification.requestPermission().then((permission) => {
if (permission === 'granted') {
const notification = new Notification('大家好，我是答案cp3！', {
body: '我是副标题',
icon: 'https://sf6-ttcdn-tos.pstatp.com/img/user-avatar/d8537ba83ad12777c1519fedcf3f62fb~300x300.image',
requireInteraction: true
})
notification.onclick = () => {
console.log('我被点击了！')
notification.close()
}
}
})
}
}
showNotificationFn()
先允许：
再显示通知：
mac上的：
window上的：
总结
以上就是Notification API的知识，大家可以动手敲敲代码，还是挺有意思的。
