Notification API 是 HTML5 新增的桌面通知 API，用于向用户显示通知信息。该通知是脱离浏览器的，即使用户没有停留在当前标签页，甚至最小化了浏览器，该通知信息也一样会置顶显示出来。

如果用的是Chrome浏览器的新版本，则必须是https协议

① 用户权限获取

想要向用户显示通知消息，需要获取用户权限，而相同的域名只需要获取一次权限。只有用户允许的权限下，Notification 才能起到作用.

if (Notification.permission === 'granted') {
    console.log('用户允许通知');
} else if (Notification.permission === 'denied') {
    console.log('用户拒绝通知');
} else {
    console.log('用户还没选择，去向用户申请权限吧');
}

② 请求权限

Notification.requestPermission().then(function(permission) {
    if (permission === 'granted') {
        console.log('用户允许通知');
    } else if (permission === 'denied') {
        console.log('用户拒绝通知');
    }
});

③ 推送通知

//判断浏览器是否支持Web Notifications API
function suportNotify() {
    if (window.Notification) {
        // 支持
        console.log("支持" + "Web Notifications API");
        //如果支持Web Notifications API，再判断浏览器是否支持弹出实例
        // showMess()
    } else {
        // 不支持
        console.log("不支持 Web Notifications API");
    }
}
//判断浏览器是否支持弹出实例
function showMess(data) {
    setTimeout(function() {
        console.log('1：' + Notification.permission);
        //如果支持window.Notification 并且 许可不是拒绝状态
        if (window.Notification && Notification.permission !== "denied") {
            //Notification.requestPermission这是一个静态方法，作用就是让浏览器出现是否允许通知的提示
            Notification.requestPermission().then(function(permission) {
                if (permission === "granted") {
                    var m = new Notification('有新的消息', {
                        body: data && data.msg ? data.msg : '您当前有一个消息通知，请注意想查看',
                        tag: 'tag',
                        data: data,
                        icon: "/icon/notice.png"　　 //消息图片
                    });
                    m.onclick = function() { //点击当前消息提示框后，跳转到当前页面
                        if (m.data) {
                            window.open('你的连接地址', '_blank');
                        }
                    }
                    setTimeout(function() {
                        m.close();
                    }, 5000);
                } else {
                    alert('当前浏览器不支持弹出消息')
                }
            });
        }
    }, 1000)
}

④ 关闭通知

如果想定时删除通知可以如下操作

setTimeout(function() {
    m.close();
}, 3000);

⑤ 点击事件处理

m.onclick = function() {
   //你的点击处理
}