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

效果图

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

html5新功能Notification - web_notice
html5新功能Notification（图5-1）

html5新功能Notification - web_notice_form
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-2）

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/ 。

 【源码】本文代码片段及相关软件，请点此获取

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

本站的忠实读者小伙伴，正在阅读下面这些文章：

欢迎转载传播本篇原创文章，转载请保留链接及作者信息。
欢迎指正文字或逻辑错误，将会择优在文末列出您的信息。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可，规模化镜像抄袭本站内容的行为，将会根据有关法律法规进行维权。
《程序如此灵动~》下所有原创文章，如被用于商业用途，请您按规定支付稿费。

苏南大叔需要你的支持

PHP高手欢聚QQ群：218127186     逗逼虎开心聊QQ群：175454274

感谢您的打赏，让我更有动力，将更多精彩教程文章，呈现给大家！谢谢！