html5系列：notification api升級——從webkitNotifications到Notification

最近又鼓搗起兩年前作的一個chrome擴展，想要跑起來卻發現報錯了，看了下console，首先是indexedDB報錯，說是window.webkitIndexedDB已經被廢棄了，用window.indexedDB代替後，就沒再報錯了，看來我這chrome 46的indexedDB api只是改了個更通用的名稱，仍是比較厚道的，因此，這裏就不詳述了。
真正出問題的是桌面通知，chrome 46給我報的錯是window.webkitNotifications不是個對象，這可坑爹了都沒提示我要換成什麼。立刻百度谷歌一塊兒上，排名前列的大部分都是我當年就看到的老資料，好不容易找到最新的資料，測試可用，下面介紹一下新版的window.Notifications與老版的window.webkitNotifications有什麼區別。

從chrome 22開始，webkitNotifications就被取消了，只能使用標準化的Notification。

獲取權限

不管是新版仍是老版的notification api，都是須要獲得用戶的批准，才能獲取到相應的api權限。
老版獲取權限的方式是這樣的：

1. 經過checkPermission()方法檢查當前是否已得到權限。

2. 若還沒有得到權限，則調用requestPermission()方法向用戶請求權限。

而新版取消了checkPermission()方法，直接經過requestPermission()方法完成查詢權限及獲取權限這兩項任務，具體代碼以下：

Notification.requestPermission(function(status){  //status值有三種：default/granted/denied
  if(Notification.permission !== status){
    Notification.permission = status;
  }
});

建立消息

重點來了，老版是這樣的：

1. 利用window.webkitNotifications.createNotification()或window.webkitNotifications.createHTMLNotification()方法來建立一個Notification對象。

2. 調用剛剛建立的Notification對象的show()方法來進行顯示。

新版則又精簡了一點，直接new一個Notification對象，在new的時候把桌面通知的參數都傳進去，這桌面通知就會立刻顯示，具體代碼看下方:

var options={
            dir: "ltr",  //控制方向，聽說目前瀏覽器還不支持
            lang: "utf-8",
            icon: "http://ihuster.com/static/avatar/m_default.png",
            body: "你好呀，歡迎留言交流呀"
        };
var n = new Notification("hello word!", options);

另外新版還有一點不一樣的是，提供了4個事件：

• onshow()

• onclick()

• onclose()

• onerror()

參考文章：

• 《使用HTML5 Notification API開啓瀏覽器桌面提醒》

• 《使用 Web Notifications》