HTML5 Web Notification桌面通知特点

HTML5 Web Notification通知是属于桌面性质的通知，有点类似于显示器右下角蹦出的QQ弹框，杀毒提示之类的，跟浏览器是脱离的，消息是置顶的。

兼容性

IE14以及其他桌面浏览器都支持Web Notification，目前移动端的支持情况并不好，Android部分支持，iOS Safari浏览器全军覆没(至9.3版本)：

如果浏览器支持Web Notification，不考虑私有前缀，则window.Notification就会是一个有很多静态属性和实例方法的函数。基本上，Web Notification所有的语法都是围绕Notification这个函数来进行的。

显然，通知这种事情是有可能扰民的，因此，必须经过用户同意才行

HTML代码

<button id="button">有人想加你为好友</button>
<p id="text"></p>
JS代码：
if (window.Notification) {
    var button = document.getElementById('button'), text = document.getElementById('text');
    
    var popNotice = function() {
        if (Notification.permission == "granted") {
            var notification = new Notification("Hi，帅哥：", {
                body: '可以加你为好友吗？',
                icon: 'http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg'
            });
            
            notification.onclick = function() {
                text.innerHTML = '张小姐已于' + new Date().toTimeString().split(' ')[0] + '加你为好友！';
                notification.close();    
            };
        }    
    };
    
    button.onclick = function() {
        if (Notification.permission == "granted") {
            popNotice();
        } else if (Notification.permission != "denied") {
            Notification.requestPermission(function (permission) {
              popNotice();
            });
        }
    };
} else {
    alert('浏览器不支持Notification');    
}

参考：http://www.zhangxinxu.com/wordpress/2016/07/know-html5-web-notification/