继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

简单了解Web Notification消息通知

UYOU
关注TA
已关注
手记 428
粉丝 86
获赞 458

自己平时喜欢看篮球视频,经常浏览腾讯体育,不知道有没有和我一样的同学,遇到过一个提示,问是否接受消息通知,之前也看过H5程序设计因为是比较早的一本书,当时上面提过但是说的兼容性并不怎么样,也就没有多去查看,也是这样一个契机让我查看了Notification的兼容性,原来已经达到了PC端几乎可以实现了,也是证明H5越来越强大了,很多底层的东西都可以逐步开始完善和实现了。


webp

Notification对象使用来为用户设置和显示桌面通知的,用法也是相对比较简单的,直接实例化Notification对象。

var notification  = new Notification(title,options);

title:显示通知标题

options:接收一个对象,是显示通知的配置

配置包括:

dir:文字的方向,取值为auto、ltr、rtl。默认为auto  ltr表示left to right  rtl表示right to left

lang:通知的语言,这个字符串必须在BCP 47 language tag文档中是有效的;

body:通知的内容

tag:通知的ID,通过此ID可以对通知进行刷新、替换或移除

icon:图标地址

renotify:布尔值,新通知出现的时候是否替换之前的。设置为true表示替换,如果tag为空字符串,那么会throw一个TypeError异常;

还可以控制声音、震动等,但是有这么一段官方提示说:

不鼓励开发者通过图标、声音或振动模式来给最终用户传达信息;除非这些信息 是最终用户可以访问的。

更详细的属性可以跳转到:w3c-html-ig-zh.github.io/notifications/whatwg/ 查看;

和H5的定位相同,要显示通知,需要得到用户的授权,API中提供了requestPermission方法来向用户申请是否显示通知的权限:

webp

我们也可以通过Notification.permission来获取用户授权状态,属于只读属性;

Notification也提供了事件的监听:

noshow / ondisplay : 在通知显示的时触发;

:在用户点击通知时触发

:当通知出现错误时触发

onclose:当用户关闭通知时触发

在浏览器通知显示如下

webp

简单了解了Web Notification 我在我github上面更新了我之前做的一个websocket聊天,在聊天的基础上加入了简单的消息通知,github.com/wenlei0617/node-websocket 

现在Firefox 51 for android已经支持消息通知了,有兴趣的朋友可以下载到手机上来实现这个功能,感觉很是高大上的。



作者:_Gary
链接:https://www.jianshu.com/p/afb6bbc21076


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP