不自重者,取辱。不自长者,取祸。不自满者,受益。不自足者,博闻。
关于HTML5之Notification(续) 进入全屏
line

接前一篇文章,这里有个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中还可以是可以使用的(如果你有这也的应用场景的话)

趣店(原趣分期)技术学院
重点关注技术架构、服务化、优秀工具、自动化平台、开发全流程一体化解决方案、新人培养、工程师进阶之道等方面
这里环境优雅、氛围年轻、主要是福利还多,还等什么?我们敞开技术的大门,欢迎各种工程师加入!

评论区域

line
  • 小乐 2014-08-29 20:27:00 回复
    连个icon都显示不出来!!!它哭着对我说,API都是骗人的!
    
    弱弱的说一句,
    dictionary NotificationOptions {
      NotificationDirection dir = "auto";
      DOMString lang = "";
      DOMString body;
      DOMString tag;
      DOMString icon;
    };
    
    不是iconUrl,是icon
    
    
  • Alien 2012-11-21 14:06:36 回复
    回复 Henry : 你关心的这个问题,其实可以拆解为两步,1、长连接;2、notification。长连接也有很多实现方式,最常见的是轮询,但是不实时;也可以用FlashSocket实现,就是在页面上放一个swf文件监听服务器端的响应;如果只是针对高端浏览器,可以采用HTML5提供的websocket。只要把长连接的问题解决了,得到服务器端的响应,notification的问题,就迎刃而解了。
    Henry said:
    请问,在用户已经授权的情况下,如何让服务端为用户PUSH Notifications ?也就是说,我现在要通知所有用户,然后我在后台发个指令,内容自定义,然后 用户前端就直接显示出来...
  • Henry 2012-11-21 13:23:40 回复
    请问,在用户已经授权的情况下,如何让服务端为用户PUSH Notifications ?也就是说,我现在要通知所有用户,然后我在后台发个指令,内容自定义,然后 用户前端就直接显示出来。