js实现浏览器通知功能

    最近在做一个IM聊天系统，当新消息到来，需要在用户的桌面显示通知信息，在网上查阅才知道还有这个Notification API，下面介绍一下这个API。

    首先我们需要检查浏览器是否支持这个API，可以直接用 window.Notification 来判断，如果为true就说明支持啦。。。光支持也不行，如果浏览器不允许弹出通知消息，那也是白搭的，所以，我们还要判断是否被准许—Notification.permission !== "denied" 来判断权限。

Notification.permission属性，用于读取用户给予的权限，它是一个只读属性，它有三种状态。
default：用户还没有做出任何许可，因此不会弹出通知。
granted：用户明确同意接收通知。
denied：用户明确拒绝接收通知。

    上面两个都为true后，就可以向用户弹出一条通知了。

if(window.Notification && Notification.permission !== "denied") {
    Notification.requestPermission(function(status) {
        if (status === "granted") {
            var n = new Notification('通知标题', { body: '通知内容！' });
        } else {
            alert("通知内容！");
        }
    });
}

Notification构造函数的title属性是必须的，用来指定通知的标题，格式为字符串。options属性是可选的，格式为一个对象，用来设定各种设置。该对象的属性如下：
dir：文字方向，可能的值为auto、ltr（从左到右）和rtl（从右到左），一般是继承浏览器的设置。
lang：使用的语种，比如en-US、zh-CN。
body：通知内容，格式为字符串。
tag：通知的ID，格式为字符串。一组相同tag的通知，不会同时显示，只会在用户关闭前一个通知后，在原位置显示。
icon：图表的URL，用来显示在通知上。

事件方法

show：通知显示给用户时触发。
click：用户点击通知时触发。
close：用户关闭通知时触发。
error：通知出错时触发（大多数发生在通知无法正确显示时）。
这些事件有对应的onshow、onclick、onclose、onerror方法，用来指定相应的回调函数。addEventListener方法也可以用来为这些事件指定回调函数。

举一个例子吧：

var n = new Notification('通知标题', { body: '通知内容！' });
// 使其自动关闭
n.onshow = function () {
  setTimeout(n.close.bind(n), 5000);
}