vue浏览器消息提示
JS部分
//判断浏览器是否支持浏览器消息弹窗
suportNotify() {
if (window.Notification) {
// 支持
console.log("支持" + "Web Notifications API");
//如果支持Web Notifications API,再判断浏览器是否支持弹出实例
this.showMess(event)
} else {
// 不支持
this.$notify("不支持 Web Notifications API");
}
},
// 唤起浏览器弹框 前提浏览器得允许弹框通知显示
showMess() {
var that =this
setTimeout(function() {
console.log('1:' + Notification.permission);
//如果支持window.Notification 并且 许可不是拒绝状态
if (window.Notification && Notification.permission !== "denied") {
//Notification.requestPermission这是一个静态方法,作用就是让浏览器出现是否允许通知的提示
Notification.requestPermission(function(status) {
//如果状态是同意
if (status === "granted") {
var m = new Notification('测试标题', {
body: '测试内容', //消息体内容
icon: '测试icon' //消息图片
});
//点击当前消息内容
m.onclick = function() { //点击当前消息提示框后,跳转到当前页面
that.$router.push({path:'/Reception/chatpage'})
window.focus();
},
//点击关闭消息提示框
m.onclose = function(){
m.close()
}
} else {
that.$notify('当前浏览器不支持弹出消息')
}
});
}
}, 1000)
},