HTML5 notification 实现详解附实例教程

开发时需要注意的事项: 1、需要通过http访问实现,也就是不能通过文件浏览方式。 2、requestPermission必须由用户交互触发,直接执行不会有任何效果。 demo示例请点击下方评论框的“(如有回复通知我)”虽然连回复评论都还没做。init函数的console.log只为调试而用,可以移除。采用原型+构造函数的模式封装了下,代码可以移至外部JS文件,调用方式在最下面三行。instance的notification对象可以通过instance.msg取得,可添加ondisplay,onerror,onclose,onclick的事件监听。我所使用的chrome在调试时发现notification对象亦有onshow事件,这只是与ondisplay的名称不一样而已。是标准化的名称。封装的不够完善,还想通过参数判断来实现createHTMLNotification,先这样了。 API文档参考,来自chromium的关于Notification的API文档API Specification

function Notifier(icon,title,info){
var self=this;
this.icon=icon;
this.title=title;
this.info=info;
this.init();
this.show=function(){
if(self.checkPermission()==0){
self.msg=self.create(self.icon,self.title,self.info);
self.msg.show();
}else{self.requestPermission(self.show);}

};
}
Notifier.prototype={
constructor:Notifier,
center:(window.Notifications || window.webkitNotifications),
checkPermission:function(){var p=this.center.checkPermission();return p},
requestPermission:function(cb){this.center.requestPermission(cb);
},
create:function(icon,title,info){var o=this.center.createNotification(icon,title,info);return o;},
show:function(){},
init:function(){var permission = this.center.checkPermission();
if (permission == 0) {
console.log (‘您已接受来自网站的通知!’);
this.show();
} else if (permission == 1) {
console.log (‘请点击“允许”按钮,以接受来自网站的通知’);
this.requestPermission(this.show);
} else {

        //用户不允许Notification事件
       console.log ( '您已选择禁止本页面显示网页通知!');
    }}

};
n=new Notifier(‘http://fan16.net/favicon.ico', “您已接受来自番石榴的通知!”,”有新消息时将会通知您。”);
var b=document.getElementById(‘showButton’);
b.addEventListener(‘click’, function(){ n.init();}, false);