引言
这是在初次进入Facebook的时候Chrome在地址栏弹出的提示👇
当你点击了“允许”后，即使你最小化了标签或者切到其他标签去了，朋友发给你的聊天信息也会通过桌面级的通知告诉你，FB还使用了 FCM，即使你关闭了浏览器，依旧能够调起通知，有时间再研究研究。
话再说回来，假如我们没有使用这玩意，是如何通知用户的呢？👇
通过动态地改变document.title提醒，然而当用户已经最小化去看剧斗地主了，这东西也就形同虚设了。
什么是Notification API
在MCN中是这样解释的👇
The Notifications API allows web pages to control the display of system notifications to the end user. These are outside the top-level browsing context viewport, so therefore can be displayed even when the user has switched tabs or moved to a different app. The API is designed to be compatible with existing notification systems, across different platforms.
简单翻译下就是，Notifications API允许Web端在用户桌面系统中展示通知。这个通知是桌面级的，因此即使用户切换了选项卡或移至其他应用程序也会显示。该API旨在与不同平台上的现有通知系统兼容。
经过简单测试，发现在Chrome、FF、Safari上都能正常使用，除了样式不太一样。截至目前兼容性👇
如何使用
如果浏览器支持的话，window下会有个Notification构造函数，函数展开后👇
requestPermission()
桌面级的通知就像看电影突然蹦出个广告一样，可能会扰民，所以需要提前向用户索要（ball ball）通知的权限👇
Notification.requestPermission()
// 会返回一个Promise对象，所以我们在实际过程中可以👇
Notification.requestPermission().then(permission => {
console.log(permission) // granted, denied, 或default.
})
granted表示允许通知，denied表示被拒绝了，default是个默认状态，跟被拒绝了的效果没差。
permission 静态属性
Notification.permission 值的含义同上。
实例属性
new Notification(title, {
dir: '', // 文字的方向；它的值可以是 auto（自动）, ltr（从左到右）, or rtl（从右到左）
lang: '', // 指定通知中所使用的语言。这个字符串必须在 BCP 47 language tag 文档中是有效的
body: '', // 通知内容
tag: '', // 赋予通知一个ID，以便在必要的时候对通知进行刷新、替换或移除。
icon: '', // 一个图片的URL，将被用于显示通知的图标。
data: ''，// 任意你想放进去数据。
})
Event
Notification.onclick处理 click 事件的处理。每当用户点击通知时被触发。
Notification.onshow处理 show 事件的处理。当通知显示的时候被触发。
Notification.onerror处理 error 事件的处理。每当通知遇到错误时被触发。
Notification.onclose处理 close 事件的处理。当用户关闭通知时被触发。
完整示例
function notifyMe() {
// 先检查浏览器是否支持
if (!("Notification" in window)) {
alert("This browser does not support desktop notification");
}
// 检查用户是否同意接受通知
else if (Notification.permission === "granted") {
// If it's okay let's create a notification
var notification = new Notification("Hi there!");
}
// 否则我们需要向用户获取权限
else if (Notification.permission !== "denied") {
Notification.requestPermission().then(function (permission) {
// 如果用户接受权限，我们就可以发起一条消息
if (permission === "granted") {
var notification = new Notification("Hi there!");
}
});
}
// 最后，如果执行到这里，说明用户已经拒绝对相关通知进行授权
// 出于尊重，我们不应该再打扰他们了
}
在Vue中使用
主要思路就是把需要用的方法挂载到Vue原型上，封装方法使其更符合中国人的习惯，并兼容了⭐Vue3⭐！
NPM
已推送至NPM👉www.npmjs.com/package/nat…，欢迎提Issue点Star！
