时间:2021-05-08
在使用网页版Gmail的时候,每当收到新邮件,屏幕的右下方都会弹出相应的提示框。借助HTML5提供的Notification API,我们也可以轻松实现这样的功能。
确保浏览器支持
如果你在特定版本的浏览器上进行开发,那么我建议你先到 caniuse 查看浏览器对Notification API的支持情况,避免你将宝贵时间浪费在了一个无法使用的API上。
如何开始
上面的代码构造了一个简陋的通知栏。构造函数的第一个参数设定了通知栏的标题,而第二个参数则是一个option 对象,该对象可设置以下属性:
获取权限
在显示通知栏之前需向用户申请权限,只有用户允许,通知栏才可出现在屏幕中。对权限申请的处理将有以下返回值:
用HTML创建一个按钮
不要忘记了CSS
全部的Javascript代码如下:
从这段代码可以看出,如果浏览器不支持Notification API,在点击按钮时将会出现警告“兄弟,很抱歉。你的浏览器并不能很好地支持通知功能”(Sorry bro, your browser is not good enough to display notification)。否则,在获得了用户的允许之后,我们自制的通知栏便可以出现在屏幕当中啦。
为什么要让用户手动关闭通知栏?
对于这个问题,我们可以借助setTimeout函数设置一个时间间隔,使通知栏能定时关闭。
该说的东西就这些了。如果你意犹未尽,希望更加深入地了解Notification API,可以阅读以下的页面:
MDN
Paul lund’s tutorial on notification API
在CodePen上查看demo
你可以在CodePen上看到由Prakash (@imprakash)编写的demo。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
在今天举行的EdgeWeb峰会中,微软Edge开发团队宣布即将为Win10Edge浏览器带来Web通知功能。Web通知是HTML5中的一个消息通知API,W3C
对HTML5技术的研究。HTML中文名称为超文本标记语言,是WEB的描述语言,人们日常生活中所使用的网页都是通过HTML制作的,而HTML5是基于HTML语言技
看HTML5如何提高网络应用程序:1.增强的排版和字体定制通过网页字体,如Web开放字体格式(WOFF),谷歌Web字体API,在HTML5Typekit等手段
Web前端图形动画制作技术。HTML5技术能够在Web前端开发过程中对图形图表及动画等进行制作,在HTML5技术中自带有相应的canvas标签,该标签实质上是一
一、HTML5Notification简介HTML5Notification,即桌面通知。目前浏览器依然是一个严格的沙盒工作模式,这种模式把浏览器和桌面的通信隔