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

摘要：

桌面通知，我们经常看到的比如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。

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;
    }
});