// 判斷是否支持顯示
      showJudge (data) {
        if (!('Notification' in window)) {
          alert('抱歉，此瀏覽器不支持桌面通知！')
        }
// granted: 用戶允許該網(wǎng)站發(fā)送通知 default: 默認(rèn)值，用戶還未選擇 denied: 用戶拒絕該網(wǎng)站發(fā)送通知
// Notification.permission === 'granted' 可用于檢測(cè)用戶通知權(quán)限
        Notification.requestPermission().then((result) => {
          if (result === 'denied') {
            console.log('用戶拒絕')
            return
          } else if (result === 'default') {
            console.log('用戶未授權(quán)')
            return
          }
          this.sendMesgToDesk(data)
        })
      },
      // 顯示消息通知
      sendMesgToDesk (data) {
        let notification = null
        let title = data.data.auditTitle
        let str1 = data.data.applicant + ' ' + data.data.applyTime
        let options = {
          tag: data.data.wfFormId, // 多條消息時(shí)tag相同只顯示一條通知，需要顯示多條時(shí)tag一定要不同，（谷歌每次只能顯示一條，火狐可以顯示多條）
          body: str1, // 通知主體
          data: { // 可以放置任意數(shù)據(jù)，方便后續(xù)使用
            content: data.data,
            originUrl: `http://localhost:8889/#/home`
          },
          requireInteraction: true, // 不自動(dòng)關(guān)閉通知 默認(rèn)值為false，通知會(huì)在三四秒之后自動(dòng)關(guān)閉，（谷歌有用，火狐依然會(huì)自動(dòng)關(guān)閉）
          image: require('../../../assets/img/AAA.png'), // 通知上方可顯示需要展示的大圖
          icon: require('../../../assets/img/XXX.png') // 通知圖標(biāo) 默認(rèn)是瀏覽器圖標(biāo)
        }
        notification = new Notification(title, options)
        // 事件處理
        notification.onclick = ({ currentTarget: { data } }) => {
          // notification.close() 單個(gè)通知關(guān)閉
          window.focus()
          // 默認(rèn)進(jìn)入系統(tǒng)之前打開(kāi)的頁(yè)面，也可以這里自定義進(jìn)入的頁(yè)面
          window.location.href = data.originUrl
        }
        notification.onshow = () => {
          console.log('通知顯示了')
        }
        notification.onclose = () => {
          console.log('通知被關(guān)閉了')
        }
        notification.onerror= () => {
          console.log('遇到錯(cuò)誤')
        }
      },

<script src="https://cdnjs.cloudflare.com/ajax/libs/push.js/0.0.11/push.min.js"></script>

npm install push.js --save

import Push from 'push.js'
// 如果全局使用在main.js引入后，進(jìn)行掛載：
Vue.prototype.Push = Push

  // 手動(dòng)獲取用戶桌面通知權(quán)限
  if (this.Push.Permission.GRANTED) { // 判斷當(dāng)前是否有權(quán)限，沒(méi)有則手動(dòng)獲取
    this.Push.Permission.request()
  }
  // 監(jiān)聽(tīng)瀏覽器 當(dāng)前系統(tǒng)是否在當(dāng)前頁(yè)
  document.addEventListener('visibilitychange', () => {
    if (!document.hidden) {   // 處于當(dāng)前頁(yè)面
    // 關(guān)閉之前的消息通知，清空
      this.Push.clear()
      this.notificationArr = []
    }
  })

	// 發(fā)送 瀏覽器 桌面通知
      showDeskNotify (data) {
        if (!this.Push.Permission.has()) {
          alert('抱歉，此瀏覽器不支持桌面通知！')
          return
        }
        // 關(guān)閉之前的消息通知
        this.Push.clear()
        let title = '消息通知(' + (this.auditMessageArr.length + 1) + '條未讀)'
        this.Push.create(title, {
          tag: data.data.wfFormId,
          body: '類(lèi)型：' + data.data.auditTitle + '\n時(shí)間：' + data.data.applyTime,
          requireInteraction: true,
          icon: require('../../../assets/img/XX.png'),
          onClick: () => {
            window.focus()
            // this.close() // 單個(gè)關(guān)閉
            this.Push.clear() // 全部關(guān)閉
            // window.location.href = data.originUrl
          }
        })
      },

npm install title-notify --save

var iNotify = new iNotify().init()
//推薦下面寫(xiě)法
var iNotify = new iNotify({
    message: '有消息了。',//標(biāo)題
    effect: 'flash', // flash | scroll 閃爍還是滾動(dòng)
    openurl:"http://www.bing.com", // 點(diǎn)擊彈窗打開(kāi)連接地址
    onclick:function(){ //點(diǎn)擊彈出的窗之行事件
       console.log("---")
    },
    //可選播放聲音
    audio:{
        //可以使用數(shù)組傳多種格式的聲音文件
        file: ['msg.mp4','msg.mp3','msg.wav']
        //下面也是可以的哦
        //file: 'msg.mp4'
    },
    //標(biāo)題閃爍，或者滾動(dòng)速度
    interval: 1000,
    //可選，默認(rèn)綠底白字的  Favicon
    updateFavicon:{
        // favicon 字體顏色
        textColor: "#fff",
        //背景顏色，設(shè)置背景顏色透明，將值設(shè)置為“transparent”
        backgroundColor: "#2F9A00"
    },
    //可選chrome瀏覽器通知，默認(rèn)不填寫(xiě)就是下面的內(nèi)容
    notification:{
        title:"通知！",//設(shè)置標(biāo)題
        icon:"",//設(shè)置圖標(biāo) icon 默認(rèn)為 Favicon
        body:'您來(lái)了一條新消息'//設(shè)置消息內(nèi)容
    }
})

  iNotify.isPermission()

 iNotify.player() 
 // 自動(dòng)播放
 iNotify.loopPlay()

iNotify.stopPlay()

iNotify.setURL('msg.mp3')// 設(shè)置一個(gè)
iNotify.setURL(['msg.mp3','msg.ogg','msg.mp4']) // 設(shè)置多個(gè)

iNotify.addTimer()

 iNotify.clearTimer()