HTML5桌面通知

之前做个这个功能的但是后来发现失效了,最后Google了一下,好像是Google浏览器不支持原来的那一套API了,然后就没注意了,发现居然最近有个网站又使用了这个功能,于是乎有研究了一下。

注意几个问题:

  1. 必须放到服务器上面才能测试。
  2. 本地有点慢。

DEMO地址:http://www.acgist.com/demo/notification/index.html

获取权限:

if(Notification && Notification.permission !== "granted"){    
    Notification.requestPermission(function(status){    
        if(Notification.permission !== status){    
            Notification.permission = status;    
        }
    });    
}

构造通知:

var options = {    
    lang : "utf-8", // 编码
    icon : "http://www.acgist.com/logo.png", // 图标
    body : "ACGIST,这只是一个例子!" // 内容
};     
var notify = new Notification("你收到一条通知!", options);

不用像之前那个API那样还需要调用show方法了。

通知事件:

notify.onshow = function(){
    console.log("你看到了通知!");    
};    
notify.onclick = function() {
    console.log("你点击了通知!");    
};    
notify.onclose = function(){
    console.log("你关闭了通知!");
};
notify.onerror = function() {
    console.log("发生了一点意外!");
}

这个功能挺不错的,特别是对一些需要及时通知的一些应用,聊天室,客服系统这些。

参考文章:http://xuhong.github.io/2014/05/22/notification/