Chrome桌面通知功能Notifications對象

 今天在瀏覽cnbeta.com站的時候，看到了《Chrome開始帶來WebKit的通知功能》一文。Chrome又一次領先的發佈了新技術的API—webkitNotifications。通過查看它給的例子(Desktop Notification Demo)，裏面有比較詳細的說明，不過看起來還是比較難懂，所以我整理了下，重新編寫了例子中的代碼，加上註釋，算是比較清晰了吧。《具體實例》

JavaScript Code複製內容到剪貼板

var Notify = function(){}
//判斷是否支持webkitNotifications
Notify.prototype.isSupport = function(){
  return !!window.webkitNotifications;
}
//需要向用戶申請權限來確定是否支持webkitNotifications，如果得到權限，就會執行callback，參數爲true.
Notify.prototype.getPermission = function(callback){
  window.webkitNotifications.requestPermission(function(){
    if (callback) {
      callback(this.checkPermission());
    }
  });
}
//查看是否得到權限
Notify.prototype.checkPermission = function(){
  return !!(window.webkitNotifications.checkPermission() == 0);
}
//聲明一個webkitNotifications實例，並且使用show方法觸發桌面提示框
Notify.prototype.show = function(icon, title, body){
  //聲明webkitNotifications實例
  var _notify = window.webkitNotifications.createNotification(icon, title, body);
  _notify.show();
}
onload = function(){
  var notify = new Notify();
  if (!notify.isSupport()) {
    alert("Your browser don't support webkitNotifications!!");
    return;
  }
  document.getElementById("get").onclick = function(){
    notify.getPermission();
    return false;
  }
  document.getElementById("btn").onclick = function(){
    if (notify.checkPermission()) {
      notify.show("", "Notify in Chrome", "This is come from \"Javascript's dancing\"")
    } else {
      alert("Apply permission please.You can click \"Get Permission\".");
    }
    return false;
  }
}

 

上面展示的代碼中比較陌生的就是：window.webkitNotifications，requestPermission，checkPermission，
createNotification，show。目前api中主要是這幾個對象或者方法，其中window.webkitNotification是整個通知功能的對象，requestPermission、checkPermission、createNotification都是它的靜態化方法，show是通過createNotification實例化出來的對象的方法。顧名思義，requestPermission就是獲取用戶權限的方法，它帶有一個函數參數；checkPermission用來檢查是否獲得了權限；createNotification用於聲明一個通知功能的實例；show方法就是這個通知功能實例的方法，用於展示桌面彈出框(注意看右下角哦，^_^)。

因此，使用該通知功能的步驟也就清晰了：先檢查是否支持webkitNotifications –> 獲得用戶允許的權限 –> 檢查是否得到了權限 –> 聲明用於通知功能的實例 –> 通過show方法彈出通知信息框 –> 恭喜你上手了。:)