知识点
1、首先通过document.visibilityState判断是否处于最小化状态，
通过document.visibilityState是否等于hidden判断
2、处于最小化的话弹出消息提醒框
注意：谷歌浏览器仅支持https下的消息提醒
代码实现
popNotice(number, areaInfo, name?) {
// 判断是否处于最小化状态
if (document.visibilityState === 'hidden') {
if (window.Notification) { // 判断是否支持提醒
//判断是否允许提醒
if (Notification.permission === 'granted') { // 允许的话弹出提醒
this.pop(number, areaInfo, name)
} else if (Notification.permission !== 'denied') { // 不允许的话重新询问浏览器是否可以接收提醒
Notification.requestPermission(function (permission) {
this.pop(number, areaInfo, name)
})
}
} else {
alert('你的浏览器不支持此消息提示功能，请使用chrome内核的浏览器！')
}
}
}
// 弹出提醒框
pop(number, areaInfo, name?) {
const notification = new Notification('新来电：', {
body: `${name ? name : '未知客户'}，${number}（${areaInfo.province}/${areaInfo.city}），请注意接听！`,
icon: '../../../assets/images/call_remind.png'
})
notification.onclick = (() => {
// 点击后进行的操作
notification.close() // 关闭提醒框
})
}
