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

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

方案一： H5 JavaScript Web Notification API

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

// 判斷是否支持顯示showJudge (data) {if (!('Notification' in window)) {alert('抱歉，此瀏覽器不支持桌面通知！')} // granted: 用戶允許該網(wǎng)站發(fā)送通知 default: 默認值，用戶還未選擇 denied: 用戶拒絕該網(wǎng)站發(fā)送通知 // Notification.permission === 'granted' 可用于檢測用戶通知權(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 = nulllet title = data.data.auditTitlelet str1 = data.data.applicant + ' ' + data.data.applyTimelet options = {tag: data.data.wfFormId, // 多條消息時tag相同只顯示一條通知，需要顯示多條時tag一定要不同，（谷歌每次只能顯示一條，火狐可以顯示多條）body: str1, // 通知主體data: { // 可以放置任意數(shù)據(jù)，方便后續(xù)使用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()// 默認進入系統(tǒng)之前打開的頁面，也可以這里自定義進入的頁面window.location.href = data.originUrl}notification.onshow = () => {console.log('通知顯示了')}notification.onclose = () => {console.log('通知被關閉了')}notification.onerror= () => {console.log('遇到錯誤')}},

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

二、主要代碼

// 手動獲取用戶桌面通知權(quán)限if (this.Push.Permission.GRANTED) { // 判斷當前是否有權(quán)限，沒有則手動獲取this.Push.Permission.request()}// 監(jiān)聽瀏覽器 當前系統(tǒng)是否在當前頁document.addEventListener('visibilitychange', () => {if (!document.hidden) { // 處于當前頁面// 關閉之前的消息通知，清空this.Push.clear()this.notificationArr = []}}) // 發(fā)送 瀏覽器 桌面通知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 實現(xiàn)瀏覽器的 title 閃爍、滾動、聲音提示、chrome、Firefox、Safari等系統(tǒng)通知

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:{//可以使用數(shù)組傳多種格式的聲音文件file: ['msg.mp4','msg.mp3','msg.wav']//下面也是可以的哦//file: 'msg.mp4'},//標題閃爍，或者滾動速度interval: 1000,//可選，默認綠底白字的 FaviconupdateFavicon:{// favicon 字體顏色textColor: "#fff",//背景顏色，設置背景顏色透明，將值設置為“transparent”backgroundColor: "#2F9A00"},//可選chrome瀏覽器通知，默認不填寫就是下面的內(nèi)容notification:{title:"通知！",//設置標題icon:"",//設置圖標 icon 默認為 Faviconbody:'您來了一條新消息'//設置消息內(nèi)容} })

3.其他

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

iNotify.isPermission()

播放聲音

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

停止播放

iNotify.stopPlay()

設置播放聲音URL

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

添加計數(shù)器

iNotify.addTimer()

清除計數(shù)器

iNotify.clearTimer()

總結(jié)

以上是生活随笔為你收集整理的vue实现浏览器桌面通知的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。