本篇内容主要讲解“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官网
一、引入
script引入方式
<script src="https://cdnjs.cloudflare.com/ajax/libs/push.js/0.0.11/push.min.js"></script>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 --save2.主要代码
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如何实现浏览器桌面通知”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
