浏览器桌面消息通知Notification

起因：在做一些交互式页面时，如果切换到浏览器其他页面，或者是缩小了浏览器等等，都可能导致忽略了该关注的页面有新的消息或回调，所以需要有比较友好的提醒方式（例如有个消息弹窗提示）。

解决：Notification 一个H5的新特性，可以实现Web的桌面通知功能。它生成的消息通知不需要依附某个页面，而是依附于浏览器，从而可以让我们不需要停留在页面上。

使用桌面通知流程：
1、检查浏览器是否支持Notification；
2、检查浏览器的通知权限；
3、若没有权限，先获取浏览器的通知权限；
4、创建消息通知；
5、展示消息通知；
6、设置关闭回调；
示例场景：聊天会话；
预计效果：每次新消息都弹窗提醒，且点击弹窗可打开对应会话，关闭该会话所有消息通知，保留其他会话消息通知；
小坑：Windows上谷歌浏览器每次只展示一个弹窗，360、搜狗每次最多展示3个；Mac上谷歌跟360都可展示所有弹窗，无搜狗浏览器可安装，不知道效果；
使用示例：

// 消息通知提示音
const notificationAudio = new Audio('https://img-fe.tengzhihh.com/audio/c58fb135c2546f.mp3');
// 消息弹窗数组
const notificationInstanceArr: Array<{ [propName: string]: number | Notification }> = [];
Function handleNotification () {
// 检查是否支持
if (!('Notification' in window)) {
    console.log('浏览器不支持消息通知');
    return;
}
// 创建配置项
const options = {
    body: '您有新的未读消息', // 展示内容
    silent: false, // 是否静音
    lang: 'ZH',
    sticky: true, // 是否粘性展示，不轻易被清理
    // renotify: true, // 弹窗内容更新，是否重新通知，需与tag搭配使用
    requireInteraction: true, // 是否保持，不自动关闭
};
// 检查权限是否已获取 已获取为granted
if (Notification.permission !== 'granted') {
    // 未允许权限，则申请权限
    Notification.requestPermission(function (status) {
      if (status == 'granted') {
        // 创建提醒
        const notification = new Notification('新消息提醒', options);
        // 设置点击事件
        notification.onclick = function () {
          handleMessageFocus(data);
        };
        // 存储通知实例，保留最新三个
        if (notificationInstanceArr.length == 3) {
          const instance = notificationInstanceArr.shift()?.instance;
          instance?.close();
        }
        notificationInstanceArr.push({
          id: target.id,
          instance: notification,
        });
        // 播放通知音频
        notificationAudio?.play();
      }
    });
  } else {
    // 已有权限，重复操作即可
    const notification = new Notification('新消息提醒', options);
    notification.onclick = function () {
      handleMessageFocus(data);
    };
    if (notificationInstanceArr.length == 3) {
      const instance = notificationInstanceArr.shift()?.instance;
      instance?.close();
    }
    notificationInstanceArr.push({
      id: target.id,
      instance: notification,
    });
    notificationAudio?.play();
  }
}

function handleMessageFocus (target) {
    // 可以在这里 根据新消息target，处理展示具体会话逻辑
    // ...
    // 展示原有页面
    window.focus();
    // 删除点击的会话通知
    for (let i = 0; i < notificationInstanceArr.length; i++) {
        if (notificationInstanceArr[i].id == target.id) {
          notificationInstanceArr[i].instance.close();
          notificationInstanceArr.splice(i, 1);
          i--;
        }
    }
}

注意：系统设置、浏览器设置相关的权限都能导致通知无效，无效时可以优先看看权限设置。