vue如何實(shí)現(xiàn)瀏覽器桌面通知

本篇內(nèi)容主要講解“vue如何實(shí)現(xiàn)瀏覽器桌面通知”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“vue如何實(shí)現(xiàn)瀏覽器桌面通知”吧!

瀏覽器桌面通知：當(dāng)瀏覽器最小化，或者切換到其他標(biāo)簽頁(yè)不在當(dāng)前系統(tǒng)頁(yè)面，或在其他頁(yè)面時(shí)依然可以顯示通知

*使用前注意：生產(chǎn)環(huán)境地址必須為https協(xié)議，開(kāi)發(fā)環(huán)境可以用localhost IP地址，且必須允許顯示通知才能顯示桌面通知
*存在兼容性問(wèn)題，不同系統(tǒng)不同瀏覽器甚至不同版本瀏覽器效果略有不同

方案一： H5 JavaScript Web Notification API

Notification官網(wǎng)
目前Notification除了IE瀏覽器不支持外, 其他瀏覽器都已支持桌面通知，移動(dòng)端瀏覽器基本都未支持

      // 判斷是否支持顯示
      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ò)誤')
        }
      },

方案二： push.js 工具 （基于notification）

push官網(wǎng)

一、引入

1.script引入方式

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

2.npm安裝引入

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
          }
        })
      },

方案三： iNotify.js JS

JS 實(shí)現(xiàn)瀏覽器的 title 閃爍、滾動(dòng)、聲音提示、chrome、Firefox、Safari等系統(tǒng)通知

1.npm安裝引入

npm install title-notify --save

2.主要代碼

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)容
    }
})

3.其他

判斷瀏覽器彈框通知是否被阻止。

  iNotify.isPermission()

播放聲音

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

停止播放

iNotify.stopPlay()

設(shè)置播放聲音URL

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

添加計(jì)數(shù)器

iNotify.addTimer()

清除計(jì)數(shù)器

 iNotify.clearTimer()

到此，相信大家對(duì)“vue如何實(shí)現(xiàn)瀏覽器桌面通知”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！