有的時(shí)候我們會(huì)在桌面右下角看到這樣的提示：
這種桌面提示是HTML5新增的 Web Push Notifications 技術(shù)。
Web Notifications 技術(shù)使頁(yè)面可以發(fā)出通知，通知將被顯示在頁(yè)面之外的系統(tǒng)層面上。能夠?yàn)橛脩籼峁└玫捏w驗(yàn)，即使用戶忙于其他工作時(shí)也可以收到來(lái)自頁(yè)面的消息通知，例如一個(gè)新郵件的提醒，或者一個(gè)在線聊天室收到的消息提醒等等。
PS：除了IE外，各大現(xiàn)代瀏覽器都對(duì)這個(gè)桌面推送有了基本的支持。
開(kāi)始
要?jiǎng)?chuàng)建一個(gè)消息通知，非常簡(jiǎn)單，直接使用 window 對(duì)象下面的 Notification 類即可，代碼如下：
var n = new Notification("桌面推送", {
icon: 'img/icon.png',
body: '這是我的第一條桌面通知。',
image:'img/1.jpg'
});
于是你就會(huì)看到系統(tǒng)桌面彈出我上面那張截圖的通知。
PS：消息通知只有通過(guò) Web服務(wù)訪問(wèn) 該頁(yè)面時(shí)才會(huì)生效，如果直接雙擊打開(kāi)本地文件，是沒(méi)有任何效果的。也就是說(shuō)你的文件需要使用服務(wù)器的形式打開(kāi)，而不是直接使用瀏覽器打開(kāi)本地文件。
當(dāng)然也有可能你什么都沒(méi)看到，別著急繼續(xù)往下看。
基本語(yǔ)法
當(dāng)然在想要彈出上面通知之前，有必要了解一下一個(gè)通知的基本語(yǔ)法：
let myNotification = new Notification(title, options);
title ：定義一個(gè)通知的標(biāo)題，當(dāng)它被觸發(fā)時(shí)，它將顯示在通知窗口的頂部。
options （可選）對(duì)象包含應(yīng)用于通知的任何自定義設(shè)置選項(xiàng)。
常用的選項(xiàng)有：
body: 通知的正文，將顯示在標(biāo)題下方。
tag: 類似每個(gè)通知的ID，以便在必要的時(shí)候?qū)νㄖM(jìn)行刷新、替換或移除。
icon: 顯示通知的圖標(biāo)
image: 在通知正文中顯示的圖像的URL。
data: 您想要與通知相關(guān)聯(lián)的任意數(shù)據(jù)。這可以是任何數(shù)據(jù)類型。
renotify: 一個(gè) Boolean 指定在新通知替換舊通知后是否應(yīng)通知用戶。默認(rèn)值為false，這意味著它們不會(huì)被通知。
requireInteraction: 表示通知應(yīng)保持有效，直到用戶點(diǎn)擊或關(guān)閉它，而不是自動(dòng)關(guān)閉。默認(rèn)值為false。
當(dāng)這段代碼執(zhí)行時(shí)，瀏覽器會(huì)詢問(wèn)用戶，是否允許該站點(diǎn)顯示消息通知，如下圖所示：
只有用戶點(diǎn)擊了 允許 ，授權(quán)了通知，通知才會(huì)被顯示出來(lái)。
授權(quán)
如何獲取到用戶點(diǎn)擊的是“允許”還是“阻止”呢？
window的 Notification實(shí)例有一個(gè) requestPermission 函數(shù)用來(lái)獲取用戶的授權(quán)狀態(tài)：
// 首先，我們檢查是否具有權(quán)限顯示通知
// 如果沒(méi)有，我們就申請(qǐng)權(quán)限
if (window.Notification && Notification.permission !== "granted") {
Notification.requestPermission(function (status) {
//status是授權(quán)狀態(tài)。
//如果用戶點(diǎn)擊的允許，則status為'granted'
// 如果用戶點(diǎn)擊的禁止，則status為'denied'
// 這將使我們能在 Chrome/Safari 中使用 Notification.permission
if (Notification.permission !== status) {
Notification.permission = status;
}
});
}
注意：如果用戶點(diǎn)擊了授權(quán)右上角的關(guān)閉按鈕，則status的值為default。
之后，我們只需要判斷 status 的值是否為 granted ，來(lái)決定是否顯示通知。
通知事件
但是單純的顯示一個(gè)消息框是沒(méi)有任何吸引力的，所以消息通知應(yīng)該具有一定的交互性，在顯示消息的前前后后都應(yīng)該有事件的參與。
Notification一開(kāi)始就制定好了一系列事件函數(shù)，開(kāi)發(fā)者可以很方面的使用這些函數(shù)處理用戶交互：
有： onshow , onclick , onerror , onclose 。
var n = new Notification("桌面推送", {
icon: 'img/icon.png',
body: '這是我的第一條桌面通知。'
});
//onshow函數(shù)在消息框顯示時(shí)觸發(fā)
//可以做一些數(shù)據(jù)記錄及定時(shí)關(guān)閉消息框等
n.onshow = function() {
console.log('顯示消息框');
//5秒后關(guān)閉消息框
setTimeout(function() {
n.close();
}, 3000);
};
//消息框被點(diǎn)擊時(shí)被調(diào)用
//可以打開(kāi)相關(guān)的視圖，同時(shí)關(guān)閉該消息框等操作
n.onclick = function() {
console.log('點(diǎn)擊消息框');
// 打開(kāi)相關(guān)的視圖
n.close();
};
//當(dāng)有錯(cuò)誤發(fā)生時(shí)會(huì)onerror函數(shù)會(huì)被調(diào)用
//如果沒(méi)有g(shù)ranted授權(quán)，創(chuàng)建Notification對(duì)象實(shí)例時(shí)，也會(huì)執(zhí)行onerror函數(shù)
n.onerror = function() {
console.log('消息框錯(cuò)誤');
// 做些其他的事
};
//一個(gè)消息框關(guān)閉時(shí)onclose函數(shù)會(huì)被調(diào)用
n.onclose = function() {
console.log('關(guān)閉消息框');
//做些其他的事
};
一個(gè)簡(jiǎn)單的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<button>點(diǎn)擊發(fā)起通知</button>
</body>
<script>
window.addEventListener("load", function() {
// 首先，讓我們檢查我們是否有權(quán)限發(fā)出通知
// 如果沒(méi)有，我們就請(qǐng)求獲得權(quán)限
if (window.Notification && Notification.permission !== "granted") {
Notification.requestPermission(function(status) {
if (Notification.permission !== status) {
Notification.permission = status;
}
});
}
var button = document.getElementsByTagName("button")[0];
button.addEventListener("click", function() {
// 如果用戶同意就創(chuàng)建一個(gè)通知
if (window.Notification && Notification.permission === "granted") {
var n = new Notification("Hi！");
}
// 如果用戶沒(méi)有選擇是否顯示通知
// 注：因?yàn)樵?Chrome 中我們無(wú)法確定 permission 屬性是否有值，因此
// 檢查該屬性的值是否是 "default" 是不安全的。
else if (window.Notification && Notification.permission !== "denied") {
Notification.requestPermission(function(status) {
if (Notification.permission !== status) {
Notification.permission = status;
}
// 如果用戶同意了
if (status === "granted") {
var n = new Notification("Hi!");
}
// 否則，我們可以讓步的使用常規(guī)模態(tài)的 alert
else {
alert("Hi!");
}
});
}
// 如果用戶拒絕接受通知
else {
// 我們可以讓步的使用常規(guī)模態(tài)的 alert
alert("Hi!");
}
});
});
</script>
</html>
當(dāng)我們打開(kāi)界面的時(shí)候，就會(huì)彈出授權(quán)申請(qǐng)，如果我們點(diǎn)擊 允許 ，然后點(diǎn)擊按鈕，就可以發(fā)送一條通知到桌面，我們就可以在桌面右下角看到這條通知。
上面我們只是顯示一條消息。
if (status === "granted") {
var n = new Notification("Hi");
}
如果我們有很多消息的話，比如我是用個(gè)for循環(huán)來(lái)模擬大量通知的情況。
for(var i=0; i<10; i++) {
var n = new Notification("Hi,"+i);
}
可以看到有10條通知都顯示出來(lái)。但是某些情況下對(duì)于用戶來(lái)說(shuō)，顯示大量通知是件令人痛苦的事情。
比如，如果一個(gè)即時(shí)通信應(yīng)用向用戶提示每一條傳入的消息。為了避免數(shù)以百計(jì)的不必要通知鋪滿用戶的桌面，可能需要接管一個(gè)掛起消息的隊(duì)列。
因此，需要為新建的通知添加一個(gè) 標(biāo)記 。
如果有一條新通知和上一條通知具有相同的標(biāo)記，那么這條新通知將會(huì)替換上一條通知，最后桌面上只會(huì)顯示最新的通知。
還是上面的例子，只需要在觸發(fā)通知加個(gè) tag 屬性即可：
for (var i = 0; i < 10; i++) {
// 最后只看到內(nèi)容為 "Hi! 9" 的通知
var n = new Notification("Hi! " + i, {tag: 'soManyNotification'});
}
最后
消息通知是個(gè)不錯(cuò)的特性，可是也不排除有些站點(diǎn)惡意的使用這個(gè)功能，一旦用戶授權(quán)之后，不時(shí)的推送一些不太友好的消息，打擾用戶的工作，這個(gè)時(shí)候我們可以移除該站點(diǎn)的權(quán)限，禁用其消息通知功能。
我們可以點(diǎn)擊瀏覽器地址輸入框左邊的嘆號(hào)就有一個(gè)通知的選項(xiàng)，我們可以修改授權(quán)?；蛘咴谕ㄖ?yè)面也有修改通知的選項(xiàng)，可以根據(jù)具體情況進(jìn)行修改授權(quán)通知。
于是最基本的 Web Notification 就實(shí)現(xiàn)了。
總結(jié)
以上所述是小編給大家介紹的HTML5中的Web Notification桌面通知功能的實(shí)現(xiàn)方法,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
