html5桌面通知自动关闭时间,HTML5 桌面通知：Notification

Notification介绍

Notification API 是HTML5新增的桌面通知API，用来显示桌面通知消息。

浏览器权限

通过window.Notification来判断浏览器是否兼容Notification API

if (window.Notification) { // 判断浏览器是否兼容Notification }

用户权限

要想向用户显示通知消息，就要通过浏览器获取用户权限，主要通过Notification.permission来判断。

Notification.permission包括的值:

default ：默认。

granted ：显示通知的权限。

denied ：用户拒绝。

let permission = Notification.permission;

// 显示通知的权限

if (permission == "granted") {

} else if (permission == "denied") {

// 不同意，发不了咯

} else {

// 其他状态，可以重新发送授权提示

Notification.requestPermission();

}

推送通知

获取用户通知后，就可以进行推送消息啦！！

var notification = new Notification(title, options)

参数如下:

title：显示的通知标题

options:通知的设置选项(可选)

dir : 文字的方向,它的值可以是 auto(自动), ltr(从左到右), or rtl(从右到左)。

body:通知的内容。

icon：要在通知中显示的图标的URL。

requireInteraction：通知保持有效不自动关闭，默认为false。(测试了下这个参数好像没有效果)

还有一些其他的参数，因为没有用到这里就不一一列举啦。

var notification = new Notification(item.name, {

dir: 'rtl',

body: "这个是内容哦！",

icon: icon,

requireInteraction:false,

})

通知消息的效果图如下：

image

通知事件

Notification接口的 onclick属性指定一个事件侦听器来接收click事件。

notification.onclick = function() {

// window.focus 可以定位到有消息的窗口

window.focus();

// 关闭通知

notification.close();

};

兼容:目前测试了PC端的，发现window 7 的IE浏览器还不支持，其他各浏览器通知消息如果为默认的话也会有不一样的差异。