高级浏览器添加离线提示:window.webkitNotifications 桌面通知Notification

分类:Javascript| 发布:camnprbubuol| 查看: | 发表时间:2013/4/25

摘要:

桌面通知,我们经常看到的比如QQ,Skype在右下角的消息提醒。在网页中我们也可以用Javascript模拟实现这一功能,只是这个消息框中浏览器中。目前浏览器依然是一个严格的沙盒工作模式,这种模式把浏览器和桌面的通信隔离开,但WHATWG下在讨论的一种特性Notification可以跨越沙盒通过桌面向用户发出浏览器的通知。现在在Html5中也可以实现这一功能,目前Notification的浏览器支持情况不大好,我测试了一下,IE9,FF12,FF20,Opera11不支持,Chrome支持最好。 

 

如何使用:

 

一、检测浏览器是否支持通过window.webkitNotifications可以判断浏览器是否支持notification

 if(!window.webkitNotifications){
alert("您的浏览器不支持Notification桌面通知!");
}

二、权限只有获得用户授权才可以显示Notification。

//请求授权,如果成功则执行回调函数
function RequestPermission (callback) {
window.webkitNotifications.requestPermission(callback);
}
function showNotification(){
if (window.webkitNotifications.checkPermission() > 0) {
RequestPermission(showNotification);
}else{
//show Notification here..
}

三、创建Notification参考:http://dvcs.w3.org/hg/notifications/raw-file/tip/Overview.html通过chrome的Debug,我们可以看到通过window的webkitNotifications对象可以创建Notification。
创建Notification

var notification = window.webkitNotifications.createNotification("images/HTML5.png", "标题", "内容内容内容内容内容内容内容内容内容内容内容内容内容内容");

可以对创建的notification对象添加一些属性,注册一些事件。在W3.org文档中我们可以看到一些事件onclick,onshow,onclose等,

notification.onshow = function() { alert("showing");}notification.onclick = function(){alert("clicked");}

四、显示和关闭同样在上图中我们可以看到show()和cancel()方法,通过这两个方法我们可以显示或注销一个notification

notification.show();
notification.cancel();

五、完整的例子:通过以上分析我们可以了解到一个notification的创建到注销的过程:先检查是否支持webkitNotifications –> 获得用户允许的权限 –> 检查是否得到了权限 –> 声明用于通知功能的实例 –> 通过show方法弹出通知信息框 ->销毁notification

if(!window.webkitNotifications){
alert("您的浏览器不支持Notification桌面通知!");
}
function RequestPermission (callback) {
window.webkitNotifications.requestPermission(callback);
}
var notification;
function showNotification(){
if (window.webkitNotifications.checkPermission() > 0) {
RequestPermission(showNotification);
}else {
notification = window.webkitNotifications.createNotification("HTML5.png", "Camnpr", "window.webkitNotifications");
notification.onshow = function() { setTimeout('notification.cancel()', 5000); }
notification.onclick = function(){alert("clicked");}
notification.show();
}
}

HTML代码部分:(只有通过点击按钮,Chrome浏览器会提示你,是否允许,点击允许后,就会出现效果。 直接调用 showNotification() 不行。)

结果:桌面通知

参考:Html5 系列之:桌面通知Notification
Using the Notifications API

PS:

 baidu.on( window, 'click', function(){
if( window.webkitNotifications && window.webkitNotifications.checkPermission() != 0 ) {
window.webkitNotifications.requestPermission();
}
} );
baidu.on( window, 'online', function(){} );
baidu.on( window, 'offline', function(){
if( window.webkitNotifications && window.webkitNotifications.checkPermission() == 0 ) {
var notification = window.webkitNotifications.createNotification( '', '提醒', '您当前网络情况有点差,好像掉线了 :)' );
notification.show();
notification = null;
}
});
365据说看到好文章不转的人,服务器容易宕机
原创文章如转载,请注明:转载自郑州网建-前端开发 http://camnpr.com/
本文链接:http://camnpr.com/archives/advancedBrowser-chrome-window-webkitNotifications.html