[分享]使浏览器网页弹出Windows桌面消息！！！

产品：你能让我们的网页系统一些审核通知也像QQ那种一样发出右下角横幅弹窗消息吗

效果图
展示效果基于windows的谷歌浏览器、edge浏览器

页面中展示预警内容

检测到预警情况会通知用户且更新页面内容

用户不会一直将页面展示在最前面，所以需要做到页面即使被遮挡、收起，用户也能收到提示，达到及时提示的目的

在查看了红宝书内容之后，得到了一个BOM API：Notification，这个API可以让页面发出通知，基本用法如下

function notifyMe() {
  if (!("Notification" in window)) {
    // 检查浏览器是否支持通知
    alert("当前浏览器不支持桌面通知");
  } else if (Notification.permission === "granted") {
    // 检查是否已授予通知权限；如果是的话，创建一个通知
    const notification = new Notification("你好！");
    // …
  } else if (Notification.permission !== "denied") {
    // 我们需要征求用户的许可
    Notification.requestPermission().then((permission) => {
      // 如果用户接受，我们就创建一个通知
      if (permission === "granted") {
        const notification = new Notification("你好！");
        // …
      }
    });
  }

  // 最后，如果用户拒绝了通知，并且你想尊重用户的选择，则无需再打扰他们
}

1. Notification.permission 表示当前通知的权限，有 granted（已授予）、denied（已拒绝）、default（默认）三个值。

2. Notification.requestPermission 用于请求当前页面的通知权限。当调用这个方法时，浏览器左上角会出现询问窗口，让用户选择是否允许该页面发出通知。它返回一个 Promise，当用户做出后，Promise 会解析为用户选择的权限（granted 表示允许，denied 表示拒绝）。

模拟微信样式通知

let notification = new Notification('通知标题', {
  // 正文内容
  body: '已经错过的风景就不要再打听了，当你选定了一个方向，另一边的风景便与你无关了。',
  // 图标
  icon: 'https://common.cnblogs.com/images/wechat.png',
  // 预览大图
  image: 'https://user-gold-cdn.xitu.io/2020/5/18/1722***bd522f520?imageView2/1/w/1304/h/734/q/85/format/webp/interlace/1',
  // 通知id
  tag: 1,
  // 是否一直保持有效
  requireInteraction: true
})

如果你出于好奇，在本地服务执行了上面的代码，那么你的右下角就会有这样一个东西，并且隔一会儿就消失：

至此可以基于此方法进行相关的业务拓展！