html:
<el-button type="primary" icon="el-icon-plus" @click="chromeMessageBtn">浏览器消息测试</el-button>
js:
//浏览器消息推送
chromeMessageBtn(){
this.createNotify('测试通知',{body:'您收到一条新信息！',sticky:'true'})
},
createNotify(title,options) {
var PERMISSON_GRANTED = 'granted';
var PERMISSON_DENIED = 'denied';
var PERMISSON_DEFAULT = 'default';
if (Notification.permission === PERMISSON_GRANTED) {
setTimeout( ()=> {
this.notify(title,options);
},3000)
} else {
Notification.requestPermission(function (res) {
if (res === PERMISSON_GRANTED) {
this.notify(title,options);
}
});
}
},
notify($title,$options) {
var notification = new Notification($title, $options);
notification.onshow = function(event){ console.log('show : ',event); }
notification.onclose = function(event){ console.log('close : ',event); }
notification.onclick = function(event){
notification.close();
}
noticeFactionMsg.show()
}
//浏览器标题闪烁通知
var noticeFactionMsg = {
time: 0,
title: document.title,
timer: null,
//显示新消息提示
show: function () {
var title = noticeFactionMsg.title.replace("", "").replace("【您有新消息】", "");
//定时器，此处产生闪烁
//由于定时器无法清除，在此调用之前先主动清除一下定时器打到缓冲效果，否则定时器效果叠加标题闪烁频率越来越快
clearTimeout(noticeFactionMsg.timer);
noticeFactionMsg.timer = setTimeout(function () {
noticeFactionMsg.time++;
noticeFactionMsg.show();
if (noticeFactionMsg.time % 2 == 0) {
document.title = "【您有新消息】" + title
} else {
document.title = title
};
}, 300);
return [noticeFactionMsg.timer, noticeFactionMsg.title];
},
//取消新消息提示
//此处起名最好不要用clear，由于关键字问题有时可能会无效
clears: function () {
clearTimeout(noticeFactionMsg.timer);
document.title = noticeFactionMsg.title;
}
}
window.document.addEventListener("mouseover", noticeFactionMsg.clears);
还在技术调研中，以上方法浏览器提示需要https连接，可以先用localhost进行测试。原文参考
控制台
福音~ 本地起前端服务，将下面代码粘贴到html文件中，网址用localhost访问就能看到桌面弹窗效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
body{position: relative;}
.notification {
width: 200px;
height: 50px;
padding: 20px;
line-height: 50px;
text-align: center;
background: #008800;
border-radius: 5px;
font-size: 30px;
position: absolute;
left: 45%;
cursor: pointer;
}
</style>
</head>
<body>
<div class="notification" @click="notifyMe()">notification</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '.notification',
data: {},
methods: {
// permission 的类型为 DOMString . 该属性的可能值为:
// granted: 用户已经明确的授予了显示通知的权限。.
// denied: 用户已经明确的拒绝了显示通知的权限。
// default: 用户还未被询问是否授权; 这种情况下权限将视为 denied.
notifyMe() {
// 先检查浏览器是否支持
if(!("Notification" in window)) {
alert("This browser does not support desktop notification");
}
// 检查用户是否同意接受通知
else if(Notification.permission === "granted") {
var notification = new Notification("你好snowball:", {
dir: "auto", //auto（自动）, ltr（从左到右）, or rtl（从右到左）
lang: "zh", //指定通知中所使用的语言。这个字符串必须在 BCP 47 language tag 文档中是有效的。
tag: "testTag", //赋予通知一个ID，以便在必要的时候对通知进行刷新、替换或移除。
// icon: "http://api.dangmeitoutiao.com/_/boss/0/img/2018/02/12/20180212085006554.JPEG", //提示时候的图标
body: "今天是个好天气" // 一个图片的URL，将被用于显示通知的图标。
});
}
// 否则我们需要向用户获取权限
else if(Notification.permission !== 'denied') {
Notification.requestPermission(function(permission) {
// 如果用户同意，就可以向他们发送通知
if(permission === "granted") {
var notification = new Notification("你好snowball:", {
dir: "auto", //auto（自动）, ltr（从左到右）, or rtl（从右到左）
lang: "zh", //指定通知中所使用的语言。这个字符串必须在 BCP 47 language tag 文档中是有效的。
tag: "testTag", //赋予通知一个ID，以便在必要的时候对通知进行刷新、替换或移除。
// icon: "http://api.dangmeitoutiao.com/_/boss/0/img/2018/02/12/20180212085006554.JPEG", //提示时候的图标
body: "今天是个好天气" // 一个图片的URL，将被用于显示通知的图标。
});
}
});
}
// 最后，如果执行到这里，说明用户已经拒绝对相关通知进行授权
// 出于尊重，我们不应该再打扰他们了
}
}
})
</script>
</html>
方案二：
title部分轮播显示字
【VUE】浏览器消息通知（声音提醒，标题栏闪动，弹框提醒）
如果本文对你有所帮助，感谢点一颗小心心，您的支持是我继续创作的动力！
网友评论