Chrome的通知功能—webkitNotifications对象

今天在浏览cnbeta.com站的时候，看到了《Chrome开始带来WebKit的通知功能》一文。Chrome又一次领先的发布了新技术的API—webkitNotifications。通过查看它给的例子(Desktop Notification Demo)，里面有比较详细的说明，不过看起来还是比较难懂，所以我整理了下，重新编写了例子中的代码，加上注释，算是比较清晰了吧。《具体实例》

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方法弹出通知信息框 –> 恭喜你上手了。:)

更多参考：《Chrome开始带来WebKit的通知功能》，《Webkit JavaScript Notifications API》，《Desktop Notifications with Webkit》