我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

苏南大叔今天给大家带来的内容,是如何利用html5的新功能Notification来做网站通知功能。这个功能,在很古老的xp时代,其实曾经出现过,那个时候,是利用activex来实现类似的效果。但是那个年代里面,没有html5,而且ie一统江湖。而现在,ie已经几乎没有什么市场份额了。所以activex的技术,也似乎逐渐没有什么用武之地。

苏南大叔:html5新功能Notification,如何调用使用? - notification
html5新功能Notification,如何调用使用?(图5-1)

效果图

效果图是从金十数据网站截图的:

苏南大叔:html5新功能Notification,如何调用使用? - web_notice
html5新功能Notification,如何调用使用?(图5-2)

代码请求权限

苏南大叔这里讲述的是最基础的函数使用,并不涉及更高级别不是很常用的参数问题。

函数非常简单,发出权限许可。

Notification.requestPermission()

这个函数有下面2个小小的变体,普通传统的回调函数写法,还有目前最新最流行的promise写法。

Notification.requestPermission(function(result){console.log(result);})
Notification.requestPermission().then(function(result) {console.log(result);});

当用户允许权限的时候(点击允许按钮),返回值是 granted 。
当用户拒绝的时候(点击拒绝按钮),返回值是 denied。
当用户没有处置的时候(点击关闭叉子),返回值是 default。

苏南大叔:html5新功能Notification,如何调用使用? - web_notice_demo1
html5新功能Notification,如何调用使用?(图5-3)

显示通知权限

具体的发出某条通知的js函数。

苏南大叔:html5新功能Notification,如何调用使用? - web_notice_form
html5新功能Notification,如何调用使用?(图5-4)

new Notification("这里是标题",{
       body:'这里是内容',
       icon:"https://newsn.net/usr/themes/sn_v2ex/img/sunan.jpg"
});

苏南大叔:html5新功能Notification,如何调用使用? - web_notice_demo2
html5新功能Notification,如何调用使用?(图5-5)

最终代码

基本的使用,就这么多,综上所述,最终您的代码可能是这样的。

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/

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   html5    notification