目录
内容介绍
Notification
向用户显示通知信息(即时用户不在当前标签页,或浏览器已经最小化),兼容性较差。
一、用户授权(相同域名只需用户授权一次)
1、获取授权信息
Notification.permission
console.log(Notification.permission);
Notification.requestPermission().then(function(permission) {
if (permission === 'granted') {
console.log('用户允许通知');
} else if (permission === 'denied') {
console.log('用户拒绝通知');
}
});
参数 | 说明 |
---|---|
default | 默认,不知用户选择 |
granted | 用户允许 |
denied | 用户拒绝 |
二、弹窗
1、显示弹窗
let myNotification = new Notification(title, options);
2、参数
2.1、title
通知标题,显示在通知窗口顶部
2.2、options(可选)
options对象包含应用于通知的任何自定义设置选项
参数 | 说明 |
---|---|
dir | 通知方向,默认auto,也可设置ltr(从左往右)和rtl(从右往左) |
lang | 通知语言 |
badge | 通知的图像URL |
body | 通知正文,显示在标题下方 |
tag | 通知的识别标签 |
icon | 通知中显示的图标URL |
image | 要在通知中显示的图像URL |
data | 与通知相关联的任意数据 |
vibrate | 支持振动的设备,通知时触发 |
renotify | 新通知代替旧通知时是否通知用户 |
requireInteraction | 表示通知应保持有效,直到用户点击或关闭它,而不是自动关闭。默认值为false |
注: | 以下为最新规范,所有浏览器均不支持 |
silent | 指明通知是否应该是无声的,即,不需要发出声音或振动,无论设备设置如何。默认值为false,这意味着它不会保持静默 |
sound | 包含通知触发时要播放的音频文件的URL |
noscreen | 指定通知触发是否应启用设备的屏幕。 默认值为false,这意味着它将启用屏幕 |
sticky | 指明通知是否应该是“粘”, 即不易被用户清理。默认值为false,这意味着它不会粘 |
3、隐藏弹窗
Notification.close()
4、事件
4.1、onclick:点击时
Notification.onclick = function(event) {
event.preventDefault();
window.open('http://www.mozilla.org', '_blank');
}
4.2、onshow: 显示时
Notification.onshow = function(event) {
console.log("触发show");
}
4.3、onclose:关闭时
Notification.onclose = function(event) {
console.log("触发close");
}
4.4、onerror:异常时
Notification.onerror = function(event) {
console.log("触发error");
}
5、环境
注:
本地环境只有授权弹窗,没有通知弹窗,控制台显示以下提示,需要使用https
如没有授权弹窗,需在浏览器中设置通知权限,chrome浏览器为例:
三、示例地址
示例地址:https://liujianwei695.gitee.io/phpsession/
标签:HTML5,通知弹窗,桌面通知,Notification
更多演示案例,查看 案例演示
欢迎评论留言!