浏览器调起桌面通知功能 Notification

一：介绍：Notifications API 允许网页或应用程序在系统级别发送在页面外部显示的通知;这样即使应用程序空闲或在后台，Web 应用程序也会向用户发送信息

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

三：兼容性

此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

浏览器兼容性如下：

附详细链接： "Notification" | Can I use... Support tables for HTML5, CSS3, etcNotification"Notification" | Can I use... Support tables for HTML5, CSS3, etc

具体使用：我们根据业务需求，可以监听某个事件或者消息，当收到消息时，调用如下方法：

具体使用步骤：

1、向用户发起权限请求，浏览器需要统一收到通知。

权限操作有三种状态：granted、denied、default。

2、调用 Notification API 进行推送消息，常用属性及api如下：

title: 一定会被显示的通知标题

options: 可选，一个被允许用来设置通知的对象，包含一下属性：

        dir: 文字的方向，它的值可以是auto（自动），ltr（从左到右），rtl（从右到左）

        lang：指定通知中所使用的文语言

        body：通知中额外显示的字符串

        tag：赋予通知一个ID，以便必要时对通知进行刷新，替换和移除

        icon：一个图片的url，将被用于显示通知的图标

该通知有四个回调方法

onshow： 在通知展示的时候调用

onclose： 在通知关闭的时候调用

onclick： 在通知点击的时候调用

onerror： 在通知出错的时候调用

最终效果：

    this.creatNotify(title,{body: content,sticky: true}) // title为标题，{}为option配置项

    creatNotify(title,options) {
      if (Notification.permission === "granted") { // 用户权限允许接收通知
        this.notify(title,options)
      } else if (Notification.permission === "default") {
        Notification.requestPermission().then( res => { // 向用户发起请求接收通知
          if (res === "granted") {
            this.notify(title,options)
          }
        })
      }
    },

    notify($title,$options) {
      let notification = new Notification($title,$options)
      notification.onshow = (e) => {}
      notification.onclose = (e) => {}
      notification.onclick =  e => {
        console.log(window.location);
        window.focus()
        notification.close()
      }
    }