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

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