Browser desktop notification : When the browser is minimized, or switched to other tabs that are not on the current system page, or on other pages, the notification can still be displayed
* Note before use : the production environment address must be https protocol, the development environment can use localhost IP address, and notifications must be allowed to display desktop notifications* There are
compatibility issues , different systems, different browsers and even different versions of browsers have slightly different effects
Solution 1: H5 JavaScript Web Notification API
Notification official website
At present, except for IE browser, other browsers of Notification already support desktop notification, and mobile browsers basically do not support it.
// 判断是否支持显示
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('遇到错误')
}
},
Solution 2: push.js tool (based on notification)
1. Introduction
1. script import method
<script src="https://cdnjs.cloudflare.com/ajax/libs/push.js/0.0.11/push.min.js"></script>
2.npm installation introduction
npm install push.js --save
introduce
import Push from 'push.js'
// 如果全局使用在main.js引入后，进行挂载：
Vue.prototype.Push = Push
Two, the main code
// 手动获取用户桌面通知权限
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
}
})
},
Solution 3: iNotify.js JS
JS implements browser title flashing, scrolling, sound prompts, chrome, Firefox, Safari and other system notifications
1.npm installation introduction
npm install title-notify --save
2. Main code
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. Other
Determine whether the browser pop-up notification is blocked.
iNotify.isPermission()
Play sound
iNotify.player()
// 自动播放
iNotify.loopPlay()
Stop play
iNotify.stopPlay()
Set play sound URL
1 iNotify.setURL('msg.mp3')// 设置一个
2 iNotify.setURL(['msg.mp3','msg.ogg','msg.mp4']) // 设置多个
add counter
iNotify.addTimer()
clear counter
iNotify.clearTimer()