javaScript中Notification API学习笔记

Notification API 是浏览器的通知接口，用于在用户的桌面上显示通知信息，桌面电脑和手机都适用。具体的实现形式由浏览器自行部署，对于手机来说，一般显示在顶部的通知栏。

如果网页代码调用这个API，浏览器会询问用户是否接受。只有在用户同意的情况下，通知信息才会显示。

一. 检查浏览器是否支持 Notification API：

if (window.Notification) {
    // 支持
} else {
    // 不支持
}
二. Notification的权限申请：

Notification.requestPermission() 方法用于让用户做出选择，到底是否接收通知。它的参数是一个回调函数，该函数可以接收用户授权状态作为参数。

if(window.Notification && Notification.permission !== "denied") {
    Notification.requestPermission(function(status) {
        // 进行Notification操作
    });
} else {
    // 不支持
}
三. Notification的权限状态：

Notification.permission属性，用于读取用户给予的权限，它是一个只读属性，它有三种状态。如下：

default：用户还没有做出任何许可，因此不会弹出通知。
granted：用户明确同意接收通知。
denied：用户明确拒绝接收通知。
四. Notification构造函数

Notification对象作为构造函数使用时，用来生成一条通知。

var notification = new Notification(title, options);
参数说明：

title：【必选】用来指定通知的标题，String类型；
options：【可选】配置各种设置，Object类型。
options参数对象的属性如下：

dir：文字方向，可能的值为auto、ltr（从左到右）和rtl（从右到左），一般是继承浏览器的设置；
lang：使用的语种，比如en-US、zh-CN；
body：通知内容，格式为字符串，用来进一步说明通知的目的；
tag：通知的ID，格式为字符串。一组相同tag的通知，不会同时显示，只会在用户关闭前一个通知后，在原位置显示；
icon：图表的URL，用来显示在通知上。
options参数对象的这些属性，都是可读写的。

例子：

if(window.Notification && Notification.permission !== "denied") {
    Notification.requestPermission(function(status) {
        var n = new Notification('通知标题', { body: '这里是通知内容！' });
    });
}
五. 实例对象的事件

show：通知显示给用户时触发。
click：用户点击通知时触发。
close：用户关闭通知时触发。
error：通知出错时触发（大多数发生在通知无法正确显示时）。
并不能从通知的close事件，判断它是否为用户手动关闭。

例子：

// 当显示通知时的回调

notification.onshow = function() {
  console.log('Notification shown');
};
// Notification实例的close方法用于关闭通知

var notification = new Notification("Hi!");

notification.close(); // 手动关闭

// 自动关闭
notification.onshow = function () {
  setTimeout(notification.close.bind(notification), 5000);
}