vue如何實現瀏覽器桌面通知

本篇內容主要講解“vue如何實現瀏覽器桌面通知”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“vue如何實現瀏覽器桌面通知”吧!

瀏覽器桌面通知：當瀏覽器最小化，或者切換到其他標簽頁不在當前系統頁面，或在其他頁面時依然可以顯示通知

*使用前注意：生產環境地址必須為https協議，開發環境可以用localhost IP地址，且必須允許顯示通知才能顯示桌面通知
*存在兼容性問題，不同系統不同瀏覽器甚至不同版本瀏覽器效果略有不同

方案一： H5 JavaScript Web Notification API

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

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

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

push官網

一、引入

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引入后，進行掛載：
Vue.prototype.Push = Push

二、主要代碼

  // 手動獲取用戶桌面通知權限
  if (this.Push.Permission.GRANTED) { // 判斷當前是否有權限，沒有則手動獲取
    this.Push.Permission.request()
  }
  // 監聽瀏覽器 當前系統是否在當前頁
  document.addEventListener('visibilitychange', () => {
    if (!document.hidden) {   // 處于當前頁面
    // 關閉之前的消息通知，清空
      this.Push.clear()
      this.notificationArr = []
    }
  })

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

方案三： iNotify.js JS

JS 實現瀏覽器的 title 閃爍、滾動、聲音提示、chrome、Firefox、Safari等系統通知

1.npm安裝引入

npm install title-notify --save

2.主要代碼

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

3.其他

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

  iNotify.isPermission()

播放聲音

 iNotify.player() 
 // 自動播放
 iNotify.loopPlay()

停止播放

iNotify.stopPlay()

設置播放聲音URL

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

添加計數器

iNotify.addTimer()

清除計數器

 iNotify.clearTimer()

到此，相信大家對“vue如何實現瀏覽器桌面通知”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！