html:
<el-button type="primary" icon="el-icon-plus" @click="chromeMessageBtn">瀏覽器消息測(cè)試</el-button>
js:
//瀏覽器消息推送
chromeMessageBtn(){
this.createNotify('測(cè)試通知',{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()
}
//瀏覽器標(biāo)題閃爍通知
var noticeFactionMsg = {
time: 0,
title: document.title,
timer: null,
//顯示新消息提示
show: function () {
var title = noticeFactionMsg.title.replace("", "").replace("【您有新消息】", "");
//定時(shí)器腥椒，此處產(chǎn)生閃爍
//由于定時(shí)器無(wú)法清除，在此調(diào)用之前先主動(dòng)清除一下定時(shí)器打到緩沖效果，否則定時(shí)器效果疊加標(biāo)題閃爍頻率越來(lái)越快
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困食，由于關(guān)鍵字問(wèn)題有時(shí)可能會(huì)無(wú)效
clears: function () {
clearTimeout(noticeFactionMsg.timer);
document.title = noticeFactionMsg.title;
}
}
window.document.addEventListener("mouseover", noticeFactionMsg.clears);
還在技術(shù)調(diào)研中，以上方法瀏覽器提示需要https連接翎承，可以先用localhost進(jìn)行測(cè)試硕盹。原文參考
控制臺(tái)
福音~(yú) 本地起前端服務(wù)，將下面代碼粘貼到html文件中叨咖，網(wǎng)址用localhost訪(fǎng)問(wèn)就能看到桌面彈窗效果瘩例。
<!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 的類(lèi)型為 DOMString . 該屬性的可能值為:
// granted: 用戶(hù)已經(jīng)明確的授予了顯示通知的權(quán)限。.
// denied: 用戶(hù)已經(jīng)明確的拒絕了顯示通知的權(quán)限甸各。
// default: 用戶(hù)還未被詢(xún)問(wèn)是否授權(quán); 這種情況下權(quán)限將視為 denied.
notifyMe() {
// 先檢查瀏覽器是否支持
if(!("Notification" in window)) {
alert("This browser does not support desktop notification");
}
// 檢查用戶(hù)是否同意接受通知
else if(Notification.permission === "granted") {
var notification = new Notification("你好snowball:", {
dir: "auto", //auto（自動(dòng)）, ltr（從左到右）, or rtl（從右到左）
lang: "zh", //指定通知中所使用的語(yǔ)言垛贤。這個(gè)字符串必須在 BCP 47 language tag 文檔中是有效的。
tag: "testTag", //賦予通知一個(gè)ID趣倾，以便在必要的時(shí)候?qū)νㄖM(jìn)行刷新南吮、替換或移除。
// icon: "http://api.dangmeitoutiao.com/_/boss/0/img/2018/02/12/20180212085006554.JPEG", //提示時(shí)候的圖標(biāo)
body: "今天是個(gè)好天氣" // 一個(gè)圖片的URL誊酌，將被用于顯示通知的圖標(biāo)部凑。
});
}
// 否則我們需要向用戶(hù)獲取權(quán)限
else if(Notification.permission !== 'denied') {
Notification.requestPermission(function(permission) {
// 如果用戶(hù)同意，就可以向他們發(fā)送通知
if(permission === "granted") {
var notification = new Notification("你好snowball:", {
dir: "auto", //auto（自動(dòng)）, ltr（從左到右）, or rtl（從右到左）
lang: "zh", //指定通知中所使用的語(yǔ)言碧浊。這個(gè)字符串必須在 BCP 47 language tag 文檔中是有效的涂邀。
tag: "testTag", //賦予通知一個(gè)ID，以便在必要的時(shí)候?qū)νㄖM(jìn)行刷新箱锐、替換或移除比勉。
// icon: "http://api.dangmeitoutiao.com/_/boss/0/img/2018/02/12/20180212085006554.JPEG", //提示時(shí)候的圖標(biāo)
body: "今天是個(gè)好天氣" // 一個(gè)圖片的URL，將被用于顯示通知的圖標(biāo)驹止。
});
}
});
}
// 最后浩聋，如果執(zhí)行到這里，說(shuō)明用戶(hù)已經(jīng)拒絕對(duì)相關(guān)通知進(jìn)行授權(quán)
// 出于尊重臊恋，我們不應(yīng)該再打擾他們了
}
}
})
</script>
</html>
方案二：
title部分輪播顯示字
【VUE】瀏覽器消息通知（聲音提醒衣洁，標(biāo)題欄閃動(dòng)，彈框提醒）
如果本文對(duì)你有所幫助抖仅，感謝點(diǎn)一顆小心心坊夫，您的支持是我繼續(xù)創(chuàng)作的動(dòng)力砖第！
