浏览器桌面通知Notification探究

　先说下websocket吧，WebSocket 规范是 HTML 5 中的一个重要组成部分，已经被很多主流浏览器所支持，也有不少基于 WebSocket 开发的应用。正如名称所表示的一样，WebSocket 使用的是套接字连接，基于 TCP 协议，可用于任意的客户端和服务器程序。WebSocket目前由W3C进行标准化。WebSocket已经受到Firefox 4、Chrome 4、Opera 10.70以及Safari 5等浏览器的支持，主要用于s/c的数据通信，但以上的例子不是双向通信，而是单项消息推送，客户端只接收消息提示并查看就行了，接下来我在浏览器里找了下，发现了这个：

浏览器桌面通知这个功能，也就是Desktop Notification这个啦，基本的回调方式是这样的

Notification.requestPermission(callback);

其工作流程大致是检测用户是否同意执行，这个方法用于向用户请求获得消息提醒的权限，调用这个方法将产生如下效果，分别对应着3中状态：“granted”（状态值：0）表示用户同意消息提醒；“default”（状态值：1）表示默认状态，用户既未拒绝，也未同意；“denied”（状态值：1）表示用户拒绝消息提醒。只有在状态值为0的时候才能够允许消息提醒，这个值保存在一个内部变量中，并且是只读的，通过checkPermission()方法可以提取到这个状态值:

然后如果用户同意执行有权限推送通知了，就可以配置推送消息给浏览器了，看起来很高端的样子。通过new构造，显示通知。

　　推送方法：new Notification(title, options)，其中title是必须参数，表示通知小框框的标题内容，options是可选参数，下面是一些参数的简单说明（实际内容有很长，有兴趣的小伙伴可以看下html5api说明）

lang:提示的语言，这个没啥用吧

bady:提示消息的主体内容。会在标题的下面显示

tag:标记当前通知的标签

icon:就是提示的时候显示的图标啦

renotify：是否替换之前的通知项

官方说明

使用代码如下:

function showNotice() {   
    Notification.requestPermission(function (perm) {  
        if (perm == "granted") {  
            var notification = new Notification("这是一个通知撒:", {  
                dir: "auto",  
                lang: "hi",  
                tag: "testTag",  
                icon: "https://static.cnblogs.com/images/adminlogo.gif",  
                body: "通知content"  
            }); 
            setTimeout(function() {
                notification.close();//关闭桌面通知
            }, 5000);
            notification.onclick = function(){
                //点击桌面通知，模拟实现把用户小化的窗口大化并刷新
                notification.close();//关闭桌面通知
                var href = window.location.href;//获取当前页面的url
                window.close();//将当前页面关闭
                window.open(href);//新开一个页面，url为当前页面
            }
            navigator.onerror = function(){
                //当有错误发生时会onerror函数会被调用
                console.log('桌面通知发生了错误');
            }
            navigator.onshow = function(){
                //消息框显示时会被调用
                console.log('桌面通知显示ing');
            }
        }
        
    })  
}