HTML5 之消息通知(Web Notification)
2020-06-22 04:29
183 查看
关于 HTML5 ,写了不少文章,总觉得相关的高级 API 都得过一遍。系统的了解,站在更高的高度去思考问题,这样才能事半功倍。
一、先睹为快
我们先来尝试一个最简单的例子,打开
chrome开发者工具,粘贴代码进去直接运行:
1 | new Notification('Jartto\'s 消息通知', { |
并没有出现什么消息通知,怎么回事?不要着急,接着往下看。
二、用户授权
按照上面的示例,我们运行了,但是并没有成功调起消息推送框。这时候需要查看一下用户是否授权,控制台输入:
1 | > Notification.permission |
很快我们就会发现,原来用户许可是
default,因为不知道用户的选择,所以浏览器的行为与
denied时相同,即为拒绝。
所以问题就转变为,如何获取用户授权?
三、获取授权
1 | Notification.requestPermission(function (permission) { |
Notification.requestPermission 这个方法只能被用户行为调用(比如:onclick 事件),并且不能被其他的方式调用。
四、兼容性
看到这些
HTML5的高级
API,总是会有一些顾虑。例子虽好,用起来也很方便,但是到底兼容性如何,这是一个值得思考的问题。
可以看到,基本上所有浏览器都支持了,除了
iOS Safari和
Opera Mini,所以移动端应用需谨慎。
五、API 文档
我们先来系统性的梳理一下 API,很简单,花 5 分钟过一下。
用例:
1 | let notification = new Notification(title, options) |
参数:
- title:一定会被显示的通知标题
- options:一个被允许用来设置通知的对象。它包含以下属性:
dir : 文字的方向;它的值可以是
auto
(自动),ltr
(从左到右),or rtl
(从右到左) - lang: 指定通知中所使用的语言。这个字符串必须在
BCP 47 language tag
文档中是有效的。 - body: 通知中额外显示的字符串
- tag: 赋予通知一个
ID
,以便在必要的时候对通知进行刷新、替换或移除。 - icon: 一个图片的
URL
,将被用于显示通知的图标。
属性:
Notification.permission: 一个用于表明当前通知显示授权状态的字符串。可能的值包括:
denied
(用户拒绝了通知的显示),granted
(用户允许了通知的显示),default
(因为不知道用户的选择,所以浏览器的行为与denied
时相同)
方法:
- Notification.onclick:处理
click
事件的处理,每当用户点击通知时被触发。 - Notification.onshow:处理
show
事件的处理,当通知显示的时候被触发。 - Notification.onerror:处理
error
事件的处理,每当通知遇到错误时被触发。 - Notification.onclose:处理
close
事件的处理,当用户关闭通知时被触发。 - Notification.requestPermission():用于当前页面想用户申请显示通知的权限。
- Notification.close():用于关闭通知。
六、完整示例
按照上面
API,我们来写一个完整的示例:
1 | function notifyMe() { |
相关文章推荐
- 桌面消息通知:HTML5 Notification
- HTML5 Notification消息通知
- Notification消息通知 自定义消息通知内容布局
- Android消息通知(notification)和PendingIntent传值
- Android学习—Notification消息通知
- Android消息通知(notification)和PendingIntent传值
- Android消息通知-Notification
- Android中的消息通知(NotificationManager和Notification)
- notification android原生消息通知代码详解
- Html5 系列之:桌面通知Notification
- 通知提示Html5 Notification
- Android的消息通知--Notification
- 推送消息 web push notification
- HTML5显示桌面通知-Notification
- Html5 系列之:桌面通知Notification
- 通过web 向rtx发送通知消息
- 使用Notification发送消息通知
- Android 消息通知-Notification
- Android:Notification通知消息,NotificationManager,setLatestEventInfo
- Android中的消息通知(NotificationManager和Notification)