HTML5 之訊息通知（Web Notification）
摘要：
關於 HTML5 ，寫了不少文章，總覺得相關的高階 API 都得過一遍。系統的瞭解，站在更高的高度去思考問題，這樣才能事半功倍。
一、先睹為快
我們先來嘗試一個最簡單的例子，開啟 chrome 開發者工具，貼上程式碼進去直接執行：
new Notification('...
關於 HTML5 ，寫了不少文章，總覺得相關的高階 API 都得過一遍。系統的瞭解，站在更高的高度去思考問題，這樣才能事半功倍。
一、先睹為快
我們先來嘗試一個最簡單的例子，開啟 chrome 開發者工具，貼上程式碼進去直接執行：
new Notification('Jartto\'s 訊息通知', { dir: 'rtl', body: '這是一個訊息，通過 Web Notification 傳送，作為測試！', icon: 'https://raw.githubusercontent.com/chenfengyanyu/my-web-accumulation/master/images/logo.jpeg' })
並沒有出現什麼訊息通知，怎麼回事？不要著急，接著往下看。
二、使用者授權
按照上面的示例，我們運行了，但是並沒有成功調起訊息推送框。這時候需要檢視一下是否使用者授權，控制檯輸入：
> Notification.permission
很快我們就會發現，原來使用者許可是 default ，因為不知道使用者的選擇，所以瀏覽器的行為與 denied 時相同，即為拒絕。
三、相容性
看到這些 HTML5 的高階 API ，總是會有一些顧慮。例子雖好，用起來也很方便，但是到底相容性如何，這是一個值得思考的問題。
可以看到，基本上所有瀏覽器都支援了，除了 iOS Safari 和 Opera Mini ，所以移動端應用需謹慎。
四、API 文件
我們先來系統性的梳理一下 API，很簡單，花 5 分鐘過一下。
用例：
let notification = new Notification(title, options)
引數：
- title：一定會被顯示的通知標題
- options：一個被允許用來設定通知的物件。它包含以下屬性：
- dir : 文字的方向；它的值可以是
auto（自動）,ltr（從左到右）,or rtl（從右到左） - lang: 指定通知中所使用的語言。這個字串必須在
BCP 47 language tag文件中是有效的。 - body: 通知中額外顯示的字串
- tag: 賦予通知一個
ID，以便在必要的時候對通知進行重新整理、替換或移除。 - icon: 一個圖片的
URL，將被用於顯示通知的圖示。
- dir : 文字的方向；它的值可以是
屬性：
Notification.permission: 一個用於表明當前通知顯示授權狀態的字串。可能的值包括：
-
denied(使用者拒絕了通知的顯示), -
granted(使用者允許了通知的顯示), -
default(因為不知道使用者的選擇，所以瀏覽器的行為與denied時相同)
方法：
- Notification.onclick：處理
click事件的處理，每當使用者點選通知時被觸發。 - Notification.onshow：處理
show事件的處理，當通知顯示的時候被觸發。 - Notification.onerror：處理
error事件的處理，每當通知遇到錯誤時被觸發。 - Notification.onclose：處理
close事件的處理，當用戶關閉通知時被觸發。 - Notification.requestPermission()：用於當前頁面想使用者申請顯示通知的許可權。
- Notification.close()：用於關閉通知。
Notification.requestPermission 這個方法只能被使用者行為呼叫（比如：onclick 事件），並且不能被其他的方式呼叫。
五、完整示例
按照上面 API ，我們來寫一個完整的示例：
function 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("Hi there!");
}
// 否則我們需要向用戶獲取許可權
else if (Notification.permission !== 'denied') {
Notification.requestPermission(function (permission){
// 如果使用者同意，就可以向他們傳送通知
if (permission === "granted") {
var notification = new Notification("Hi there!");
}
});
}
// 最後，如果執行到這裡，說明使用者已經拒絕對相關通知進行授權
// 出於尊重，我們不應該再打擾他們了
}