一、notification簡介
Web Notifications是HTML5 的一個特性，目前我知道的有谷歌瀏覽器和windows edge對它進行了支持，用於向用戶配置和顯示桌面通知。
二、notification方法
2.1靜態方法
這些方法僅在 Notification 對象中有效。
Notification.requestPermission()
用於當前頁面想用戶申請顯示通知的權限。這個方法只能被用戶行為調用（比如：onclick 事件），並且不能被其他的方式調用。
2.2實例方法
這些方法僅在 Notification 實例或其 prototype 中有效。
1，Notification.close()
用於關閉通知。
Notification 對象繼承自 EventTarget 接口。
2，EventTarget.addEventListener()
Register an event handler of a specific event type on the EventTarget.
3，EventTarget.removeEventListener()
Removes an event listener from the EventTarget.
4，EventTarget.dispatchEvent()
Dispatch an event to this EventTarget.
三、notification舉例
<!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%;
}
</style>
</head>
<body>
<div class="notification" @click="notifyMe()">notification</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '.notification',
data: {},
methods: {
notifyMe() {
// 先檢查瀏覽器是否支持
if(!("Notification" in window)) {
alert("This browser does not support desktop notification");
}
// 檢查用戶是否同意接受通知
else if(Notification.permission === "granted") {
// If it's okay let's create a notification
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>
四、取消允許
chrome：瀏覽器設置-->內容設置-->通知-->允許-->點擊刪除某個網站。
截圖：
4.1
4.2
4.3
4.4
4.5
兼容：
五、個人體會
目前只是實現了瀏覽器端的notification，如果再寫個接口，從接口中調取數據，在boss后台做信息管理與是否顯示這樣就非常棒了。