浏览器的消息推送 浏览器Notification

Notification 是个构造函数，它上面有三个静态成员：maxActions、permission、requestPermission。

1. maxActions，这个属性值为2，表示支持的最大的actions数量。

2. permission，这个属性有三个值："granted"、"denied"、"default"，default 和 denied 效果一样，表示用户不允许该网站显示通知，granted表示用户允许该网站显示通知。

3. requestPermission，通过调用这个方法，浏览器会弹出框来让用户确认是否允许消息通知，该方法传入一个回调函数作为参数，用户授权结果作为回调函数的参数给到开发者；该方法返回一个Promise。

// 打开chrome浏览器，打开控制台，输入...
Notification.requestPermission(res =>{ console.log(res); });
/*
 * 返回值
 * Promise {<pending>}
 *   __proto__: Promise
 *   [[PromiseStatus]]: "resolved"
 *   [[PromiseValue]]: "granted"
 *
 * 输出值: granted 因为我点击了允许。
 */

Notification.permission
// 输出: "granted"

Notification 构造函数需要2个参数：title，options。

1. title 是消息的标题

2. options 消息的配置信息，含有值：

    2.1. body，通知消息的内容，只有Windows系统下Firefox可以显示多行数据，其余环境下只显示单行。

    2.2. icon，通知的图标图片地址。

    2.3. lang，消息通知的语言，值参考ISO 2 letter language codes

    2.4. dir，文字排列方向，三个值：auto、ltr、rtl。只有Windows系统下Firefox浏览器支持...

    2.5. image，当没有足够的空间显示通知本身时，用于表示通知的图像的URL。只有Windows系统下Chrome支持...

    2.6. tag，在构造函数的选项参数中指定的通知ID(如果有的话)，暂未研究出怎么使用，也没找到详细的使用文档...

    2.7. data，返回克隆后的消息格式，暂未研究出怎么使用，也没找到详细的使用文档...

    2.8. actions，用户操作行为的数组，暂未研究出怎么使用，也没找到详细的使用文档...

    2.9. badge，当没有足够的空间显示通知本身时，用于表示通知的图像的URL。然而测试过支持的浏览器，也没有一个对于这个属性做出反应...

    2.10. vibrate，指定具有振动功能的设备发出振动模式，然而在iphone手机上下载了几个浏览器，都未成功弹出通知，所以该值结果还是未知...

    2.11. requireInteraction，表示是否需要用户手动关闭通知，默认false，然而即使设置为true，通知也有系统来控制，并不会一直处于活动状态...

Firefox含Mac和Windows、Chrome含Mac和Windows、Safari，
通用的有效配置仅有3个：title，body，icon

function createNotify(title,options) {

    var PERMISSON_GRANTED = 'granted';
    var PERMISSON_DENIED = 'denied';
    var PERMISSON_DEFAULT = 'default';

    if (Notification.permission === PERMISSON_GRANTED) {
        notify(title,options);
    } else {
        Notification.requestPermission(function (res) {
            if (res === PERMISSON_GRANTED) {
                notify(title,options);
            }
        });
    }

    function notify($title,$options) {
        var notification = new Notification($title, $options);
    }
}

createNotify('测试通知',{body:'哈哈哈哈哈哈哈哈哈哈哈哈哈',icon:'https://xxx.xxx/icon.ico',image:'https://xxxx.xxx/123.jpg'});

浏览器支持情况：