介紹一個比較酷東西：HTML5 桌面通知（Notification API）

Notification API 是 HTML5 新增的桌面通知 API，用於向用戶顯示通知信息。該通知是脫離瀏覽器的，即使用戶沒有停留在當前標簽頁，甚至最小化了瀏覽器，該通知信息也一樣會置頂顯示出來。

一、用戶權限

想要向用戶顯示通知消息，需要獲取用戶權限，而相同的域名只需要獲取一次權限。只有用戶允許的權限下，Notification 才能起到作用，避免某些網站的廣告濫用 Notification 或其它給用戶造成影響。那么如何知道用戶到底是允不允許的？

Notification.permission 該屬性用於表明當前通知顯示的授權狀態，可能的值包括：

（1）default ：不知道用戶的選擇，默認。

（2）granted ：用戶允許。

（3）denied ：用戶拒絕。

if(Notification.permission === 'granted'){
    console.log('用戶允許通知');
}else if(Notification.permission === 'denied'){
    console.log('用戶拒絕通知');
}else{
    console.log('用戶還沒選擇，去向用戶申請權限吧');
}

 二、請求權限

當用戶還沒選擇的時候，我們需要向用戶去請求權限。Notification 對象提供了 requestPermission() 方法請求用戶當前來源的權限以顯示通知。

Notification.requestPermission().then(permission => {
          if (permission === 'granted') {
            console.log('用戶允許通知啦')
          } else if (permission === 'denied') {
            console.log('用戶拒絕通知啦')
          }
  })

三、推送通知

獲取用戶授權之后，就可以推送通知了。

var notification = new Notification(title, options)

參數：

　　title：

　　　　一定會被顯示的通知標題

　　options（可選參數）

　　　一個被允許用來設置通知的對象。它包含以下屬性

　　　　dir：文字方向：auto（自動）；ltr：（從左到右）；rtl：（從右到左）

　　　　lang：指定通知中所使用的語言

　　　　body：通知中額外顯示的字符串

　　　　data：想要和通知關聯的任務類型的數據

　　　　tag：賦予通知一個ID，以便在必要的時候對通知進行刷新、替換或移除。

　　　　icon：一個圖片的URL，將被用於顯示通知的圖標

　　　　image：要在通知中顯示的圖像的URL

　　　　requireInteraction：通知保持有效不自動關閉，默認為false。

var n = new Notification('狀態更新提醒',{
    body: '你的朋友圈有3條新狀態，快去查看吧',
    tag: 'test',
    requireInteraction: true
})

四、關閉通知

Notification.close()

五、權限

當你要在開放 web 應用中使用通知時，請確保將 desktop-notification 權限添加到你的 manifest 文件中。通知可以被用於任何權限級別，hosted 或更高。

"permissions": {
    "desktop-notification":{}
}

六、瀏覽器兼容性（移動端幾乎不支持）