html5新功能Notification
发布于 作者:苏南大叔 来源:程序如此灵动~苏南大叔今天给大家带来的内容,是如何利用html5的新功能Notification来做网站通知功能。这个功能,在很古老的xp时代,其实曾经出现过,那个时候,是利用activex来实现类似的效果。但是那个年代里面,没有html5,而且ie一统江湖。而现在,ie已经几乎没有什么市场份额了。所以activex的技术,也似乎逐渐没有什么用武之地。
效果图
效果图是从金十数据网站截图的:
代码请求权限
今天苏南大叔就给大家讲的是最基础的函数使用,并不涉及更高级别不是很常用的参数问题。
函数非常简单,发出权限许可。
Notification.requestPermission()
这个函数有下面2个小小的变体,普通传统的回调函数写法,还有目前最新最流行的promise写法。
Notification.requestPermission(function(result){console.log(result);})
Notification.requestPermission().then(function(result) {console.log(result);});
当用户允许权限的时候(点击允许按钮),返回值是 granted 。
当用户拒绝的时候(点击拒绝按钮),返回值是 denied。
当用户没有处置的时候(点击关闭叉子),返回值是 default。
显示通知权限
具体的发出某条通知的js函数。
new Notification("这里是标题",{
body:'这里是内容',
icon:"https://newsn.net/usr/themes/sn_v2ex/img/sunan.jpg"
});
最终代码
基本的使用,就这么多,综上所述,最终您的代码可能是这样的。
if (window.Notification) {
Notification.requestPermission(function(result){
if(result=="granted"){
new Notification("这里是标题",{
body:'这里是内容',
icon:"https://newsn.net/usr/themes/sn_v2ex/img/sunan.jpg"
});
}
});
}
总结
这里是notification的基本用法,计划将来,苏南大叔讲给大家带来更多notification的高级用法。更多文章,请点击:https://newsn.net/tag/notification/ 。



本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
《程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
《程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。
【苹果】苹果生态程序员QQ群【787907940】,等您来加入
【加群】加入QQ群【175454274】和大家一起讨论这个问题
【绝密】秘籍文章入口,仅传授于有缘之人
html5 notification
本站的忠实读者小伙伴,正在阅读下面这些文章: