notification接口用於瀏覽器向用戶提供通知內容；常見的如網頁版的微信：
1、實現，需要Notifications API 提供的通知接口：
用法：
let notification = new Notification(title, options)
title參數：用於通知的主題；
options參數：是一個對象；用於配置被通知對象 notification 的屬性；
var options={ dir://auto自動；ltr 從左到右；rtl 從右到左； lang：//指定通知使用的語言； body://通知中額外顯示的字符串； icon://圖片的URL，用於通知的圖標； }
var options = { body: 'this is a beautiful world', dir: 'rtl' } var notify1 = new Notification('hello world',options); console.log(options.body==notify1.body)//true; console.log(options.dir==notify1.dir)//true;
//options對象的屬性都是綁定到 Notifiaction 的實例對象屬性上的。
僅僅是構造一個Notification 對象的實例還不夠；
2、獲取通知權限 Notification.permission：
granted: //用戶已經明確的授予了顯示通知的權限。. denied: //用戶已經明確的拒絕了顯示通知的權限。 default: //用戶還未被詢問是否授權; 這種情況下權限將視爲 denied.
3、請求用戶權限：
Notification.requestPermission()
requestPermission()方法接受一個回調函數；這個回調函數接受一個參數；即requestPermission()返回的 permission
4、完整的通知權限請求：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<button onclick="notify()">點我查看</button>
</div>
<script>
//先檢查瀏覽器是否支持
function notify(){
if (!('Notification' in window)) {
alert('你的瀏覽器不支持Notification')
}
//檢查是否擁有通知權限；有就通知，沒有請求；
else if (Notification.permission=='granted') {
var options={
icon:'http://www.itechat.cn/ya8526/html/images/img10.jpg',
body:'such a beautiful wolrld!'
}
var notification=new Notification('hello wolrld!',options);
}else if (Notification.permission !== 'denied'){
Notification.requestPermission(
function(permission){
if (permission=='granted'){
var notification=new Notification('hello wolrld!');
}
}
);
}
}
</script>
</body>
</html>
需要注意的是；第一次需要申請權限；用戶授權之後就能正常顯示通知內容；用戶如果忽視請求，再次點擊會再次請求；用戶選擇拒絕，則瀏覽器會忽視，代碼終止。
再次注意的是 ；Notification.requestPermission(callback)這種回調寫法已經被棄用；取而代之的是基於promise的語法；其中js部分
//先檢查瀏覽器是否支持 function notify(){ if (!('Notification' in window)) { alert('你的瀏覽器不支持Notification') } //檢查是否擁有通知權限；有就通知，沒有請求； else if (Notification.permission=='granted') { var options={ icon:'http://www.itechat.cn/ya8526/html/images/img10.jpg', body:'such a beautiful wolrld!' } var notification=new Notification('hello wolrld!',options); }else if (Notification.permission !== 'denied'){ Notification.requestPermission().then(function(result){ if(result=='granted'){ var notification=new Notification('hello wolrld!',options); } }) } }
谷歌瀏覽器對於這種寫法沒有響應，火狐正常； 原因是http站點的安全性問題，需要將站點升級到HTTPS。
將站點升級到https站點後，測試谷歌瀏覽器正常，測試地址
MDN上有更多的實例屬性和事件處理；參考鏈接