HTML5中的Web Notification桌面通知API使用

HTML5中的Web Notification桌面通知:

1.传统的通知实现

1.1 在以前，我们的通知实现主要是通过闪烁页面的标题内容来实现，实现原理其实很简单，就是定时器不断修改document.title的值。

        var pageTitle = '聊天页面';
        var flag = '【你有新消息】';
        setInterval(function() {
            var title = document.title;
            if (isShine == true) {
                if (title == flag) {
                    document.title = '【         】';
                } else {
                    document.title = flag;
                }
            } else {
                document.title = pageTitle;
            }
        }, 500);

知识点：

Chrome和FireFox浏览器获得焦点和失去焦点方法：
window.onfocus = function() { };
window.onblur = function() { };
// for IE
document.onfocusin = function() { };
document.onfocusout = function() { };   document.onfocusout = function() { };

1.2 缺陷：用户的浏览器要一直是张开的。用户浏览器最小化，标题就看不见，无法及时get到有新消息的信息

2. HTML5 Web Notification桌面通知特点：

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

2.2 兼容性：IE14+（Edge）,FireFox46+,Chrome29+,safari9.1+opera38+;

3. HTML5 Web Notification语法(window.Notification)

3.1 Notification.requestPermission(),这是一个静态方法，作用就是让浏览器出现是否允许通知的提示,

下面这个是最近规范上更新的基于promise的语法：

Notification.requestPermission().then(function(permission) { ... });

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

下面这个是基于简单的回调：

Notification.requestPermission(callback);

无论是then中的还是直接callback函数的参数都是一样的，表示当前是否允许。只会是granted, denied, 或default.其中granted表示用户允许通知，denied表示用户嫌弃你，default表示用户目前还没有操作。

3.2 Notification.permission[只读]

这是一个静态属性。表示是否允许通知，值就是上面的granted, denied, 或default。默认情况下，Notification.permission的值是’default’。
因此，Notification.requestPermission()的回调方法中，可以不使用result参数，直接使用Notification.permission获取当前的通知状态。

3.3 new Notification(title, options)

获取用户授权之后，就可以推送通知了。
var notification = new Notification(title, options)；
通过new构造，显示推送通知。其中title是必须参数，表示通知小框框的标题内容，options是可选参数，对象，支持的参数以及释义见下表：

属性名	释义
dir	文字的方向；它的值可以是 auto（自动）, ltr（从左到右）, or rtl（从右到左）
lang	指定通知中所使用的语言。这个字符串必须在 BCP 47 language tag 文档中是有效的。
body	提示主体内容，字符串，会在标题的下面显示。
tag	代表通知的一个识别标签，相同tag时只会打开同一个通知窗口。
icon	字符串，要在通知中显示的图标的URL。

3.4 Notification实例属性值

Notification实例属性值的基本上和上面的options参数一致，返回的值也是options和默认值的合并值（如果浏览器支持的话）。

属性	释义
Notification.title[只读]	通知框的标题内容
Notification.dir[只读]	默认值是auto
Notification.lang[只读]	提示的语言
Notification.body[只读]	提示主体内容
Notification.tag[只读]	字符串。标记当前通知的标签。
Notification.icon[只读]	字符串。通知面板左侧那个图标地址

3.5 Notification实例方法

方法	释义
Notification.close()	用于关闭通知。通知如果你放着不管，一段时间后就会自动隐藏，大概30s左右。

3.6 事件处理

事件	释义
Notification.onclick	点击通知事件
Notification.onerror	通知显示异常事件
Notification.onclose	通知关闭事件，无论是用户手动关闭，还是直接Notification.close()关闭都会触发该该事件。
Notification.onshow	通知显示事件

4.实例
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: '/logo.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');
}