HTML5 Web Notification桌面通知

HTML5 Web Notification桌面通知

兼容性：IE14以及其他桌面浏览器都支持Web Notification；Android部分支持，iOS Safari浏览器全军覆没(至9.3版本)：

<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');
}

知识点：
Notification.requestPermission()
静态方法，作用就是让浏览器出现是否允许通知的提示，window系统Chrome浏览器目前的UI效果是这样的：

Notification.requestPermission().then(function(result) {
// result可能是是granted, denied, 或default. === Notification.permission
});

Notification.permission（只读属性）
granted, denied, 或default.

3. new Notification(title, options) 显示通知。title必选：通知的标题内容；options可选，参数见下表：
   属性名 释义
   dir 默认auto, 可以是ltr或rtl，提示主体内容的水平书写顺序。
   lang 提示的语言。
   body 提示主体内容。字符串。会在标题的下面显示。
   tag 字符串。标记当前通知的标签。
   icon 字符串。通知面板左侧那个图标地址。
   data 任意类型和通知相关联的数据。
   vibrate 通知显示时振动模式。[200, 100, 200] 表示设备振动200毫秒后停止100毫秒再振动200毫秒。
   renotify 布尔值。是否替换旧通知。true表示当前标记的通知只会出现一个（tag需要设值）。默认false叠高楼
   silent 布尔值。通知出现的时候，是否要有声音。默认false, 表示无声。
   sound 字符串。音频地址。表示通知出现要播放的声音资源。
   noscreen 布尔值。是否不再屏幕上显示通知信息。默认false, 表示要在屏幕上显示通知内容。
   sticky 布尔值。是否通知具有粘性，这样用户不太容易清除通知。默认false, 表示没有粘性。根据我自己的猜测，应该和position的sticky属性值类似。

Notification.close()Notification.onclick 事件句柄
Notification.onerror 通知显示异常，
Notification.onclose 通知关闭都会触发该该事件
Notification.onshow 通知显示触发

其他属性值除了Notification.permission外，Notification还有很多其他只读属性值，但是，基本上和上面的options参数一致，返回的值也是options和默认值的合并值（如果浏览器支持的话）。
Notification.title[只读]
Notification.dir[只读]
Notification.lang[只读]
Notification.body[只读]
Notification.tag[只读]
Notification.icon[只读]
Notification.data[只读]
Notification.silent[只读]
Notification.title[只读]
Notification.timestamp[只读]通知创建或者可以使用的时间。
Notification.noscreen[只读]
Notification.renotify[只读]
Notification.sound[只读]
Notification.sticky[只读]
Notification.vibrate[只读]