Web Notifications桌面通知js封装

var NotificationHandler = {  
    isNotificationSupported: 'Notification' in window,  
    isPermissionGranted: function() {  
        return Notification.permission === 'granted';  
    },  
    requestPermission: function() {  
        if (!this.isNotificationSupported) {  
            console.log('the current browser does not support Notification API');  
            return;  
        }  

        Notification.requestPermission(function(status) {  
            //status是授权状态，如果用户允许显示桌面通知，则status为'granted'  
            console.log('status: ' + status);  

            //permission只读属性  
            var permission = Notification.permission;  
            //default 用户没有接收或拒绝授权 不能显示通知  
            //granted 用户接受授权 允许显示通知  
            //denied  用户拒绝授权 不允许显示通知  

            console.log('permission: ' + permission);  
        });  
    },  
    showNotification: function() {  
        if (!this.isNotificationSupported) {  
            console.log('the current browser does not support Notification API');  
            return;  
        }  
        if (!this.isPermissionGranted()) {  
            console.log('the current page has not been granted for notification');  
            return;  
        }  

        var n = new Notification("sir, you got a message", {  
            icon: 'img/icon.png',  
            body: 'you will have a meeting 5 minutes later.'  
        });  

        //onshow函数在消息框显示时会被调用  
        //可以做一些数据记录及定时操作等  
        n.onshow = function() {  
            console.log('notification shows up');  
            //5秒后关闭消息框  
            setTimeout(function() {  
                n.close();  
            }, 5000);  
        };  

        //消息框被点击时被调用  
        //可以打开相关的视图，同时关闭该消息框等操作  
        n.onclick = function() {  
            alert('open the associated view');  
            //opening the view...  
            n.close();  
        };  

        //当有错误发生时会onerror函数会被调用  
        //如果没有granted授权，创建Notification对象实例时，也会执行onerror函数  
        n.onerror = function() {  
            console.log('notification encounters an error');  
            //do something useful  
        };  

        //一个消息框关闭时onclose函数会被调用  
        n.onclose = function() {  
            console.log('notification is closed');  
            //do something useful  
        };  
    }  
};  

document.addEventListener('load', function() {  
    //try to request permission when page has been loaded.  
    NotificationHandler.requestPermission();  
});  

我们看到，上面代码创建了一个NotificationHandler的对象，来管理消息相关的事件逻辑，通常我们的流程是这样的：在页面加载完之后调用requestPermission函数请求用户授权，然后页面代码执行一段时间之后，需要显示一个消息时，再调用showNotification函数显示这个消息，例如：

setTimeout(function() {  
    //if there has new mail, show notification  
    NotificationHandler.showNotification();  
}, 5000);  

需要注意的是，并不是所有的浏览器都支持Notification的，所以我们添加了一个isNotificationSupported属性，用来识别消息通知是否被浏览器所支持，在上面的代码中，如果识别到浏览器不支持这个API，就直接返回了，当然在实际的开发中，我们可以选择用其他形式来提醒用户。