H5操作浏览器桌面通知：Notification API，HTML5实现通知

MDN说明: 允许网页控制向最终用户显示系统通知—这些都在顶级浏览上下文视口之外，因此即使用户已经切换标签页或移动到不同的应用程序，也可以显示。该API被设计成与不同平台上的现有通知系统兼容。

通俗易懂的说明: Notification API 是HTML5新增的桌面通知功能，开发者可以在浏览器不关闭并且用户同意通知的前提下向桌面发送通知

=win10效果（本人win10系统）：=

只要当前页面没有关闭，不管你当前浏览的是其他页面还是其他应用，有消息通知时，屏幕右侧都会出现消息通知的弹框，点击消息提示框，这会跳转到消息页面。

注意：如果用的是Chrome浏览器的新版本，则必须是https协议，消息通知方可有效（当然如果是自己做测试，在本机用本地ip，则无所谓http还是https），chrome的旧版本则没有这一限制（具体到哪个版本为界限，就不清楚）

 //判断浏览器是否支持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(){
        setTimeout(function () {
            console.log('1：'+Notification.permission);
            //如果支持window.Notification 并且 许可不是拒绝状态
            if(window.Notification && Notification.permission !== "denied") {
                //Notification.requestPermission这是一个静态方法，作用就是让浏览器出现是否允许通知的提示
                Notification.requestPermission(function(status) {
                    console.log('2: '+status);
                    //如果状态是同意
                    if (status === "granted") {
                        var m = new Notification('收到信息', {
                            body: '您当前有一个消息通知，请注意想查看',　　//消息体内容
                            icon:"http://officeweb365.com/Content/imgs/ow.jpg"　　//消息图片
                        });
                        m.onclick = function () {//点击当前消息提示框后，跳转到当前页面
                            window.location="https:baidu.com"
                        }
                    } else{
                        alert('当前浏览器不支持弹出消息')
                    }
                });
            }
        },1000)