Notification html5 的通知api

https://developer.mozilla.org/zh-CN/docs/Web/API/notification

使用方法

var notification = new Notification(title, options)

参数：

title: 标题

option: 可选

dir : 文字的方向；它的值可以是 auto（自动）, ltr（从左到右）, or rtl（从右到左）
lang: 指定通知中所使用的语言。这个字符串必须在 BCP 47 language tag 文档中是有效的。
body: 通知中额外显示的字符串
tag: 赋予通知一个ID，以便在必要的时候对通知进行刷新、替换或移除。
icon: 一个图片的URL，将被用于显示通知的图标。

属性：

　　静态属性 - 这些属性仅在 Notification 对象上有效。

Notification.permission：一个用于表明当前通知显示授权状态的字符串。可能的值包括：denied (用户拒绝了通知的显示), granted (用户允许了通知的显示), 或 default (因为不知道用户的选择，所以浏览器的行为与 denied 时相同)

　　实例属性 - 这些属性仅在 Notification 的实例中有效。

Notification.title 在构造方法中指定的 title 参数 (只读)　
Notification.dir 知的文本显示方向。在构造方法的 options 中指定(只读)。
Notification.lang 通知的语言。在构造方法的 options 中指定(只读)。
Notification.body 通知的文本内容。在构造方法的 options 中指定(只读)。
Notification.tag 　通知的 ID。在构造方法的 options 中指定(只读)。
Notification.icon 通知的图标图片的 URL 地址。在构造方法的 options 中指定(只读)。

事件处理：这些事件在 Notification 的实例中有效

Notification.onclick 处理 click 事件的处理。每当用户点击通知时被触发。
Notification.onshow 处理 show 事件的处理。当通知显示的时候被触发。
Notification.onerror 处理 error 事件的处理。每当通知遇到错误时被触发。
Notification.onclose 处理 close 事件的处理。当用户关闭通知时被触发。

方法：

　　静态方法 - 这些方法仅在 Notification 对象中有效

Notification.requestPermission() 用于当前页面想用户申请显示通知的权限。这个方法只能被用户行为调用（比如：onclick 事件），并且不能被其他的方式调用。

　　实例方法 - 这些方法仅在 Notification 实例或其 prototype 中有效

Notification.close() 用于关闭通知。

实例：

html

    <button onclick="notifyMe()">Notify me!</button>
    <button id="btn">关闭通知</button>

    function notifyMe() {
        // 先检查浏览器是否支持
        if (!("Notification" in window)) {
            alert("This browser does not support desktop notification");
        }
        // 检查用户是否同意接受通知
        else if (Notification.permission === "granted") {
            tz();
        }
        // 否则我们需要向用户获取权限
        else if (Notification.permission !== 'denied') {
            Notification.requestPermission(function (permission) {
                // 如果用户同意，就可以向他们发送通知
                if (permission === "granted") {
                    tz();
                }
            });
        }
        function tz() {
            var notification = new Notification("Hi there!");
            notification.onshow = function(){
                console.log('通知显示');
            }
            notification.onclick = function(){
                console.log('点击通知');
            }
            var $btn = document.querySelector('#btn');
            $btn.onclick = function(){
                console.log('关闭通知');
                notification.close();
            }
            $btn = null;
        }
        // 最后，如果执行到这里，说明用户已经拒绝对相关通知进行授权
        // 出于尊重，我们不应该再打扰他们了
    }