接前一篇文章，这里有个Demo：http://www.baidufe.com/demo/notification.html

贴几段关键代码，需要的可以直接拿走。

1、W3C标准的Notification

/**
 * 显示notification，by Notification
 * @return {[type]}
 */
var _showNotificationByW3C = function(){
    window.indexForNotify = window.indexForNotify ? ++window.indexForNotify : 1;
    var notify = new Notification(
            "Alien: " + (new Date()).toUTCString(),
            {
                iconUrl : Session.staticDomain + "/img/alien20.jpg",
                tag : 'tag_by_alien',
                body : "你好，这个是通过Notification来创建的，这的名字叫：Demo"
                        + window.indexForNotify + "，"
                        + "你可以通过它来做一些很炫的桌面提醒应用！这个API还很不成熟，"
                        + "连个icon都显示不出来！！！它哭着对我说，API都是骗人的！"
            });
    notify.onerror = function(event){
        console.log("error事件被触发:",event);
    };
    notify.onshow = function(event){
        console.log("show事件被触发:",event);
    };
    notify.ondisplay = function(event){
        console.log("display事件被触发:",event);
    };
    notify.onclick = function(event){
        console.log("click事件被触发:",event);
        notify.cancel();
    };
    notify.onclose = function(event){
        console.log("close事件被触发:",event);
    };
    notify.show();
};

2、chrome中实现的webkitNotifications--createNotification

/**
 * 显示notification，by webkitNotifications
 * @return {[type]}
 */
var _showNotificationByWebkit = function(){
    var _fun = function(){
        var notify = webkitNotifications.createNotification(
                Session.staticDomain + "/img/alien20.jpg",
                "Alien: " + (new Date()).toUTCString(),
                "你好，这个是通过webkitNotifications来创建的，这只是一个Demo，"
                    + "你可以通过它来做一些很炫的桌面提醒应用！但是别抱太大期望，"
                    + "因为这只是一个简单的桌面提醒而已，不能在这个里面写HTML的！"
                    + "现在我给这个桌面提醒注册了一个click事件，点击以后它就消失鸟！"
            );
        notify.onerror = function(event){
            console.log("error事件被触发:",event);
        };
        notify.onshow = function(event){
            console.log("show事件被触发:",event);
        };
        notify.ondisplay = function(event){
            console.log("display事件被触发:",event);
        };
        notify.onclick = function(event){
            console.log("click事件被触发:",event);
            notify.close();
        };
        notify.onclose = function(event){
            console.log("close事件被触发:",event);
        };
        notify.show();
    };
   
    // 检查权限，0：已授权，1：已拒绝
    if(webkitNotifications.checkPermission() > 0) {
        // 请求授权
        webkitNotifications.requestPermission(function(){
            _fun();
        });
    }else{
        _fun();
    }
};

3、chrome中实现的webkitNotifications--createHTMLNotification

/**
 * 显示htmlNotification，by webkitNotifications
 * @return {[type]}
 */
var _showHtmlNotificationByWebkit = function(){
    var _fun = function(){
        var notify = webkitNotifications.createHTMLNotification(
                "http://www.baidu.com"
            );
        notify.onerror = function(event){
            console.log("error事件被触发:",event);
        };
        notify.onshow = function(event){
            console.log("show事件被触发:",event);
        };
        notify.ondisplay = function(event){
            console.log("display事件被触发:",event);
        };
        notify.onclick = function(event){
            console.log("click事件被触发:",event);
        };
        notify.onclose = function(event){
            console.log("close事件被触发:",event);
        };
        notify.show();
    };
   
    // 检查权限，0：已授权，1：已拒绝
    if(webkitNotifications.checkPermission() > 0) {
        // 请求授权
        webkitNotifications.requestPermission(function(){
            _fun();
        });
    }else{
        _fun();
    }
};

不过悲催的是，貌似从chrome22开始，这个API已经不能在web page中使用了，不要灰心，在chrome extension中还可以是可以使用的（如果你有这也的应用场景的话）