Js实现浏览器通知功能 - Notification
source link: https://www.fly63.com/article/detial/12227
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
什么是浏览器的 Notification ？
Notification 是浏览器提供的一种允许网页向用户显示系统通知的机制，这种系统通知是在顶级浏览上下文视口之外，因此即使用户已经切换标签页或移动到不同的应用程序，也可以显示，并且 Notification 相关的 api 被设计成与不同平台上的现有通知系统兼容。
如何使用 Notification ？
使用Notification可以发送页面外部显示的桌面通知，即使浏览器在后台运行也可以向用户发出消息。要显示一个系统通知，一般需要分成两步：用户授予显示通知的权限、发送系统通知。
1、检查权限
发送通知需要用户授权，通过只读属性 Notification.permission 获取是否有权限，其属性值有
- granted：用户已明确授权显示通知的权限
- denied：用户已明确拒绝显示通知的权限
- default：用户还未被询问是否授权
2、申请权限
Notification.requestPermission((res) => {
console.log(res) // granted、denied、default
})3、创建通知
通过 new Notification("title", options) 创建一条通知，使用 options 对通知做一些自定义设置，包含
- body: 通知的正文，显示在标题下方
- tag：定义通知的标识，相同 tag 的通知正在显示的内容会被替换，已经自动关闭的会被替换不再弹出
- icon：通知图标的 URL
- image：通知中图像的 URL
- renotify：重复的 tag 是否再次通知，默认 false 不重复通知
- requireInteraction：是否强制手动关闭，默认 false 会自动关闭
- silent：是否静音，默认 false 会有提示声音
当通知创建后会被立即显示出来，过一段时间会自动关闭，包含 4 个事件
- onshow：当通知显示给用户时触发
- onclick：当用户点击通知后触发（点击后通知会被关闭）
- onclose：当使用 notice.close.bind(notice) 关闭通知后触发（自动关闭的通知无法触发）
- onerror：当通知无法显示给用户时触发（常见于没有用户没有授权）
Notification.requestPermission((res) => {
if(res !== 'granted') return
let notice = new Notification("title", {
body: 'body',
tag: '111',
icon: './a.png',
image: './a.png',
renotify: false,
requireInteraction: true,
silent: false,
})
notice.onshow = function () {
console.log('show')
setTimeout(notice.close.bind(notice), 5000)
}
notice.onclick = function () {
console.log('click')
}
notice.onclose = function () {
console.log('close')
}
notice.onerror = function () {
console.log('error')
}
})Recommend
-
191
前言 Notification API 是 HTML5 新增的桌面通知 API，用于向用户显示通知信息。该通知是脱离浏览器的，即使用户没有停留在当前标签页，甚至最小化了浏览器，该通知信息也一样会置顶显示出来。 用户权限 想要向用户显示通知消息，需要获取用户权限
-
135
目前，web网页使用桌面通知功能的越来越多，包括微博，腾讯视频等大厂站，桌面通知功能是H5的一个API - Notifications。它允许网页或应用程序可以发出通知，通知将被显示在页面之外的系统层面上（通常使用操作系统的标准通知机制，但是在不同的平台和浏览器上的表...
-
52
关于 HTML5 ，写了不少文章，总觉得相关的高级 API 都得过一遍。系统的了解，站在更高的高度去思考问题，这样才能事半功倍。 一、先睹为快 我们先来尝试一个最简单的例子，打开 chrome 开发者工具，...
-
58
Notification是HTML5新增的API，用于向用户配置和显示桌面通知。上次在别的网站上看到别人的通知弹窗，好奇之余也想知道如何实现的。实际去查一下发现并不复杂，且可以说比较简单，故写篇博客分享给大家,希望能帮你们了解这个API。 npm包： 我还发了
-
6
前言 前段时间接到一个需求，我们的web系统有电话接听功能。产品希望有电话呼入的时候，能够有效提示用户，无论用户是否在当前的系统页签上，甚至浏览器被最小化以后也能提醒用户。就着这个需求，我做了一...
-
6
在Android的应用层中，涉及到很多应用框架，例如：Service框架，Activity管理机制，Broadcast机制，对话框框架，标题栏框架，状态栏框架，通知机制，ActionBar框架等等。 下面就来说说经常会使用到通知机制中的通知栏框架（Notificaiton），它适用于交互...
-
1
by zhangxinxu from http://www.zhangxinxu.com/wordpress/?p=5474 本文全文转载需购买版权(750¥)，摘要引流则免费，具体
-
6
怎样使通知(Notification)更加智能化 新年好呢。一年前的这个时候有没有说过越来越怕新年一类的呢。生命中值得珍重却再也无法触碰到的东西会随着一个个新年而越来越远，...
-
11
一、什么是 Notification# Notification 是浏览器最小化后在桌面显...
-
5
一、什么是 NotificationNotification是html5新增的api，用于想用户配置和现实桌面通知。这些通知的外观和特定功能因平...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK