桌面与Web的信使：Notification API（附Vue3中使用）

引言

这是在初次进入Facebook的时候Chrome在地址栏弹出的提示?

当你点击了“允许”后，即使你最小化了标签或者切到其他标签去了，朋友发给你的聊天信息也会通过桌面级的通知告诉你，FB还使用了 FCM，即使你关闭了浏览器，依旧能够调起通知，有时间再研究研究。

话再说回来，假如我们没有使用这玩意，是如何通知用户的呢？?

通过动态地改变document.title提醒，然而当用户已经最小化去看剧斗地主了，这东西也就形同虚设了。

什么是Notification API

在MCN中是这样解释的?

简单翻译下就是，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！