HTML5之訊息通知的使用(Web 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 ，將被用來顯示通知的圖示。

屬性：

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!); } }); } //最後，如果執行到這裡，說明使用者已經拒絕對相關通知進行授權// 出於尊重，我們不應該再打擾他們了}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。