记录一下 Notification Web API 的使用，以及踩的坑。

    这里建议大家可以参考一下 Notification - Web API 接口参考 | MDN (mozilla.org) 这个网站，比较的全面。

Notification 的状态：

    granted 同意——可以发通知；

    denied 拒绝——不可以发通知，请求获取权限也不行；

    default 默认状态——看浏览器，一般都是询问；可以请求获取发送通知的权限。

#这里是新建了一个js，存放获取用户权限和发送消息的功能，可以在需要发送的页面引入该js，也可以登入系统时就引入该js，然后调用 获取用户是否同意的方法。

#此方法用于获取用户是否同意发送通知
export function visitNotification() {

  const NotificationInstance = Notification || window.Notification;
  //!!通常用来做类型判断，就是双重否定等于肯定的意思
  if (!!NotificationInstance) {
    const permissionNow = NotificationInstance.permission;
    if (permissionNow === 'granted') {//允许通知
      console.log('用户同意了你!!!'); // 同意之后不会弹出请求获取
    } else if (permissionNow === 'denied') {//拒绝通知
      console.log('用户拒绝了你!!!'); //拒绝后无法请求获取权限
    } else {
      setPermission(); //如果是其它状态，则调用此方法，请求获取通知的权限
    }

    function setPermission() {
      //请求获取通知权限
      NotificationInstance.requestPermission(function(PERMISSION) {
        if (PERMISSION === 'granted') {
          console.log("用户同意咯，可以接受通知了")
        } else {
          console.log('用户无情残忍的拒绝了你!!!');
        }
      });
    }
    
    //若是测试，可以在这里调用  sendNotification 的方法，看看是否有通知
       sendNotification('nihao','412312315');
  }
}

#此方法用于发送通知
export function sendNotification(msg,uid){
  const NotificationInstance = Notification || window.Notification;
    const n = new NotificationInstance('消息通知提醒', {
      body: msg, //显示通知的内容
      requireInteraction: true, //默认是false，到时间会自动关闭；如果为true，用户不点击，则会一直显示。
      renotify: true, //默认值为 false；设为 true 将会使通知重新通知用户。
      tag: uid,  //代表通知的一个识别标签，相同tag时只会打开同一个通知窗口。
      icon: 'https://XXXX//logo.jpg', //通知的图标
      data: { //似乎可以存放多个值
        url: 'https://XXXX'
      }
    })
    
    // 一下都是 通知的显示、点击、关闭的事件
    n.onshow = function() {
      console.log('通知显示了！')
    }
    n.onclick = function(e) {
      //可以直接通过实例的方式获取data内自定义的数据
      //也可以通过访问回调参数e来获取data的数据
      window.open(n.data.url, '_blank') // 如果用户点击了通知，则直接跳转到自己的网站
      n.close()
    }
    n.onclose = function() {
      console.log('你关闭了我！！！')
    }
    n.onerror = function(err) {
      console.log('出错了，小伙子在检查一下吧')
      throw err
    }

}

测试时，发现有些浏览器是默认拒绝，有些是同意。如果是拒绝的话，不会弹出询问是否允许通知。只有为“询问”的时候，才会弹出。

一般用户同意之后，浏览器就会默认同意，后续不会弹出弹窗。如果拒绝，浏览器也不让弹出询问用户。。。

使用后才发现有些平台（如微信里面直接打开，或手机浏览器打开）是不支持该弹窗的，如果直接调用这个方法，会弹出“ReferenceError: Notification is not defined”。这个原因就是不支持Notification，需要在调用Notification时，加入下面的判断

    if (typeof Notification !== 'undefined' && typeof window.Notification !== 'undefined'){
      // return // 如果 Notification 未定义，则停止执行后续代码
      // 然后在这里调用方法
    }

但是就会导致用户接收不到弹窗。

还有一种方式，就是如果用户使用的平台不支持，直接告诉用户使用PC端的浏览器打开，不让用户登录，似乎也可以（前提是通知功能会影响业务，否则提不提醒也不重要）。