HTML5新特性[ Notifications ] 桌面訊息
阿新 • • 發佈：2019-01-08
在執行完以上程式碼後，我們就成功地建立了一個訊息框例項，在Chrome下面它最終會顯示成這樣：
到這裡我們已經成功了一半，但能不能正確地顯示出這個訊息框，最終還取決於使用者的授權。鑑於瀏覽器的安全機制，只有使用者同意網頁彈出訊息通知框，訊息通知才能夠真正的顯示出來。所以現在我們要做的就是申請使用者授權。
Notification類提供了一個requestPermission方法，用來請求使用者授權，程式碼如下：
Notification.requestPermission(function (permission) {
console.log(permission);
popNotice();
});
溫馨提示：使用者一旦沒有授權，拒絕，以上方法將不再執行！
示例demo
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>桌面訊息</title>
</head>
<body>
<!--JS程式碼：-->
<script type="text/javascript">
// 判斷是否支援Notification
if (window.Notification) {
//Notification 方法
var popNotice = function () {
var notification = new Notification("Hi，帥哥：", {
body: '可以加你為好友嗎？', //顯示訊息的內容
icon: 'http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg' //顯示訊息的縮圖
});
//訊息框被點選時被呼叫
//可以開啟相關的檢視，同時關閉該訊息框等操作
notification.onclick = function () {
notification.close();
};
//5秒後關閉訊息框
notification.onshow = function () {
setTimeout(function () {
notification.close();
}, 5000);
};
};
if (Notification.permission == "granted") { //授權
popNotice();
} else if (Notification.permission != "denied") { //沒有授權時詢問
Notification.requestPermission(function (permission) {
console.log(permission);
popNotice();
});
}
} else {
alert('瀏覽器不支援Notification');
}
</script>
</body>
</html>