共计 3720 个字符，预计需要花费 10 分钟才能阅读完成。
在开发一个 Web 利用零碎或者一个网站时，当用户触发了某个事件，或者零碎想告诉用户某个事件，比方有一条新的音讯、其他人点赞或者评论了文章、零碎流程被审核通过了等等诸如此类的场景，通常可能会想到 利用内告诉 的形式，然而这种形式有一个局限，就是如果用户切换到浏览器其余页签或者其余应用程序时，可能无奈及时看到利用零碎的告诉，那么这个时候就能够借助于浏览器的 Notification 告诉性能了。
1、什么是浏览器的 Notification？
Notification 是浏览器提供的一种容许网页向用户显示零碎告诉的机制，这种零碎告诉是在顶级浏览上下文视口之外，因而即便用户曾经切换标签页或挪动到不同的应用程序，也能够显示，并且 Notification 相干的 API 被设计成与不同平台上的现有告诉零碎兼容。
首先来看看浏览器的 Notification 告诉是什么样的，这里以 SegmentFault 网站为例，只有有新用户关注或者文章被点赞珍藏，SegmentFault 网站都会主动发送 Notification 告诉（能看到告诉的前提是要容许网站发送告诉），具体告诉如下：
除了 SegmentFault 网站外，还能够看看网页版微信的零碎告诉，也是相似的。
2、如何应用 Notification？
要显示一个零碎告诉，个别须要分成两步：用户授予显示告诉的权限 、 发送零碎告诉。
（1）用户授予显示告诉的权限
零碎要给用户发送告诉，如果用户不想查看这个告诉，即没有授予相应的权限，那么即便告诉收回了，用户也是无奈看到的。
如何向用户询问是否容许查看零碎告诉的权限呢？能够应用上面的办法
Notification.requestPermission()该办法的返回值有三个：granted、denied、default，最新的标准已将此办法更新为基于 promise 的语法，工作原理如下：
Notification.requestPermission().then(function(permission) {...});上面来看一个具体的实例，在 localhost 上询问显示零碎告诉的权限，依据不同的抉择后果，打印相应的日志信息，代码如下：
Notification.requestPermission().then(function(result) {if (result === 'denied') {console.log('回绝显示零碎告诉');
return;
}
if (result === 'default') {console.log('默认');
return;
}
console.log('容许显示零碎告诉')
});按下 F12，关上 Chrome 的控制台，复制下面的代码
运行后，能够看到浏览器会弹出一个询问框，如下：
不同的抉择，控制台会输入不同的后果
- 容许 ：控制台会输入 容许显示零碎告诉，如果抉择了容许，再次申请权限时，不会再弹出抉择框，而是在控制台间接输入容许显示零碎告诉；
- 禁止 ：控制台会输入 回绝显示零碎告诉，如果抉择了回绝，再次申请权限时，不会再弹出抉择框，而是在控制台间接输入回绝显示零碎告诉；；
- x 敞开 ：控制台会输入 默认，如果间接敞开了，再次申请权限时，仍然会弹出抉择框；
抉择【容许】后，此时再点击地址栏的信息按钮，能够看到告诉已开启了，如下：
如果不想显示告诉了，能够间接在此处敞开告诉即可，也能够应用上面的语句来查看以后用户的受权状况，如下：
Notification.permission运行后，输入后果
'granted'（2）发送零碎告诉
当用户容许显示零碎告诉后，就能够发送告诉了，这时能够应用 Notification() 构造函数创立一个新告诉，这个办法能够传入两个参数，具体如下：
title（必传）
- 定义一个告诉的题目，当它被触发时，它将显示在告诉窗口的顶部。
options（可选）
options 对象蕴含利用于告诉的任何自定义设置选项，罕用的选项有：
dir: 文字的方向；它的值能够是auto（主动）,ltr（从左到右）, orrtl（从右到左）；lang: 指定告诉中所应用的语言。这个字符串必须在 BCP 47 language tag 文档中是无效的；body: 告诉中额定显示的字符串；tag: 赋予告诉一个 ID，以便在必要的时候对告诉进行刷新、替换或移除；icon: 一个图片的 URL，将被用于显示告诉的图标；
除了上述 5 个罕用选项外，还有其余的 badge、image、data、vibrate、renotify、requireInteraction 等，具体可查看官方网站的介绍 https://developer.mozilla.org/zh-CN/docs/Web/API/notification/Notification
上面来测试一个简略的告诉，代码如下：
let notification = new Notification('有一条新告诉');这个告诉只有题目，运行后，能够看到
减少一些 options 选项，再次来测试一下零碎告诉，批改后的代码如下：
let notification = new Notification('有一条新告诉', {
dir: 'ltr',
lang: 'zh-CN',
body: '告诉的注释内容：你的销假流程已批准',
icon: 'http://localhost/coder/favicon.ico'
});运行后，能够看到告诉如下
（3）告诉事件
Notification 告诉有四种事件，能够通过监听告诉事件来执行不同的操作，具体事件如下：
- Notification.onclick：对 click 事件的解决，每当用户点击告诉时被触发；
- Notification.onshow：对 show 事件的解决，当告诉显示的时候被触发；
- Notification.onerror：对 error 事件的解决，每当告诉遇到谬误时被触发；
- Notification.onclose：对 close 事件的解决，当用户敞开告诉时被触发。
上面来测试一下告诉事件的监听，代码如下：
let notification = new Notification('有一条新告诉', {
dir: 'ltr',
lang: 'zh-CN',
body: '告诉的注释内容：你的销假流程已批准',
icon: 'http://localhost/coder/favicon.ico'
});
// 监听告诉显示事件
notification.onshow = () => console.log('告诉已显示');
// 监听告诉点击事件
notification.onclick = () => console.log('告诉被点击');
// 监听告诉被敞开事件
notification.onclose = () => console.log('告诉被敞开');
// 监听告诉谬误事件
notification.onerror = () => console.log('告诉呈现谬误');运行时，控制台会间接输入如下信息
告诉已显示点击告诉时，会输入
告诉被点击当告诉敞开时，会输入
告诉被敞开3、发送 Notification 告诉代码
联合下面的介绍，上面给出发送告诉的参考代码，具体如下：
function sendNotification(title, body, icon, callback) {
// 先查看浏览器是否反对
if (!('Notification' in window)) {
// IE 浏览器不反对发送 Notification 告诉!
return;
}
if (Notification.permission === 'denied') {
// 如果用户已回绝显示告诉
return;
}
if (Notification.permission === 'granted') {
// 用户已受权，间接发送告诉
notify();} else {
// 默认，先向用户询问是否容许显示告诉
Notification.requestPermission(function(permission) {
// 如果用户批准，就能够间接发送告诉
if (permission === 'granted') {notify();
}
});
}
function notify() {
let notification = new Notification(title, {
icon: icon,
body: body
});
notification.onclick = function() {callback && callback();
console.log('单击告诉框')
}
notification.onclose = function() {console.log('敞开告诉框');
};
}
}上面来测试一下：
sendNotification('上班告诉', '明天周五，还有十分钟上班', 'http://localhost/coder/favicon.ico');运行后，告诉的成果如下：
参考资料：
- https://developer.mozilla.org/zh-CN/docs/Web/API/notification
- https://developer.mozilla.org/zh-CN/docs/Web/API/Notifications_API