notification html5,html5新功能Notification

本博客不欢迎：各种镜像采集行为，请尊重知识产权法律法规。大家都是程序员，不要闹得不开心。

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

效果图

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

html5新功能Notification(图5-1)

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(图5-3)

显示通知权限

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

html5新功能Notification(图5-2)new Notification("这里是标题",{

body:'这里是内容',

icon:"https://newsn.net/usr/themes/sn_v2ex/img/sunan.jpg"

});

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

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。

本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。