关于Html5的消息通知接口：Notification

七娃博客 2023-03-09 18人阅读

今天看到一篇关于js调用浏览器消息弹框的文章，让我眼前一亮，原理html还有这个api！确实是一个不得了的接口，值得推荐学习一下，毕竟多学点还是有好处的。

关于Html5的消息通知接口：Notification-QUI-Notes

1.Notification.requestPermission()

让浏览器弹窗提示，是否显示通知！

Notification.requestPermission().then(function(result) {
       // result返回值
       // granted——允许同意
	// denied——不同意
	// default——未处理
});

2.Notification.permission

获取通知弹窗当前状态，获取Notification.requestPermission()的状态值

· granted——允许同意
· denied——不同意
· default——未处理

3.new Notification(title,options)

调起window通知，发送一个新消息

title —— 必填标题
options —— 可选参数，如下：

body —— 主题内容
icon —— 图标地址
sound —— 声音地址
image —— 封面图片地址
silent —— 是否静音（布尔值）
tag —— 标记当前通知的标签
renotify —— 是否交替显示（布尔值）
lang —— 语言
timestamp —— 日期
data —— 和通知相关的数据
dir —— 对齐方式：auto：默认，ltr：左到右，rtl：右到左
vibrate —— 震动，交替时间的数组，如：[100,100,300]

window通知栏，有效数据：body，icon ，sound ，image ，data ,renotify 其他的测试数据不明显，估计我用的方法不对，或者是浏览器版本不支持（谷歌109.0.5414.75）！有待继续测试。

事件方法

Notification.onclick —— 点击触发
Notification.onerror —— 通知显示异常触发
Notification.onshow —— 通知显示时候触发
Notification.onclose —— 通知关闭后触发

测试案例

var notification = new Notification("欢迎光临我的博客！", {
	body: '你看到的就是H5调用Notification通知的方法',
	icon: 'https://course.51qux.com/wp-content/uploads/2023/01/logo.png',
});
notification.onclick = function() {
	//窗口碑点击
	notification.close();
};