HTML5实现Notification API桌面通知功能


Posted in HTML / CSS onMarch 02, 2016

为什么需要HTML5的桌面通知
传统的桌面通知可以写一个div放到页面右下角自动弹出来,并通过轮询等等其他方式去获取消息并推送给用户。这种方式有个弊端就是:当我在使用京东 进行购物的时候,我是不知道人人网有消息推送过来给我的,而必须要等我把当前页面切到人人网才知道有消息推送了。这种方式的消息推送它是基于页面存活的, 但是我们需要这么一种策略:无论你在看哪个页面,只要有消息都应该能推送给我看到,这就是webkitNotification要解决的问题。 Notification生成的消息不依附于某个页面,仅仅依附于浏览器。
一个桌面通知生成的正常流程
我们先来看看一个桌面通知是如何生成的:
1.检查浏览器是否支持Notification
2.检查浏览器的通知权限(是否允许通知)
3.若权限不够则获取浏览器的通知权限
4.创建消息通知
5.展示消息通知
NOTE:关于第一点的说明需要做一些说明,Notification目前还没有标准化,所以目前只支持chrome19+和safari6+;网上有资料显示Firefox26+也支持,但是我拿我的Firefox27检测的结果是无法支持。
html5的桌面通知我相信大家并不陌生。常见的有网页版的微信等应用,需要设置桌面通知功能才可以使用。
用客户端程序实现这样的功能并不难。而传统的网页版的桌面通知可以写一个div放到页面右下角自动弹出来,并通过轮询等等其他方式去获取消息并推送给用户。这种方式有个弊端就是:当我在使用淘宝进行购物的时候,我是不知道微博有消息推送过来给我的,而必须要等我把当前页面切到新浪微博才知道有消息推送了。这种方式的消息推送它是基于页面存活的, 但是我们需要这么一种策略:无论你在看哪个页面,只要有消息都应该能推送给我看到,这就是webkitNotification要解决的问题。
Notification目前还没有标准化,所以你在w3cschool等网站上是学习不到的。但是目前主流浏览器大部分都支持Notification。关于html5的桌面通知效果图如下:

HTML5实现Notification API桌面通知功能

 
代码如下:
XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4. <meta charset="utf-8">    
  5. <title>html5桌面通知</title>    
  6. </head>    
  7. <body>    
  8. <input type="button" value="开启桌面通知" onclick="showNotice();">    
  9. <script>    
  10. function showNotice(){    
  11. Notification.requestPermission(function(status){    
  12. //status默认值'default'等同于拒绝 'denied' 意味着用户不想要通知 'granted' 意味着用户同意启用通知    
  13. if("granted" != status)    
  14. return;    
  15. var notify = new Notification("消息",{    
  16. dir:'auto',    
  17. lang:'zh-CN',    
  18. tag:'sds',//实例化的notification的id    
  19. //icon 支持ico、png、jpg、jpeg格式    
  20. icon:'http://www.xttblog.com/icons/favicon.ico',//通知的缩略图    
  21. body:'html5桌面通知' //通知的具体内容    
  22. });    
  23. notify.onclick=function(){    
  24. //如果通知消息被点击,通知窗口将被激活    
  25. window.focus();    
  26. }    
  27. });    
  28. }    
  29. </script>    
  30. </body>    
  31. </html> 

以上内容是小编给大家分享的HTML5实现Notification API桌面通知功能,希望对大家有所帮助!
原文:http://www.xttblog.com/?p=249

HTML / CSS 相关文章推荐
CSS中垂直居中的简单实现方法
Jul 06 HTML / CSS
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
Dec 30 HTML / CSS
CSS3之transition实现下划线的示例代码
May 30 HTML / CSS
HTML5 Canvas——用路径描画线条实例介绍
Jun 09 HTML / CSS
HTML5中新标签和常用标签详解
Mar 07 HTML / CSS
全面解析HTML5中的标准属性与自定义属性
Feb 18 HTML / CSS
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
Mar 15 HTML / CSS
五分钟学会HTML5的WebSocket协议
Nov 22 HTML / CSS
HTML5 客户端数据库简易使用:IndexedDB
Dec 19 HTML / CSS
如何使用canvas绘制可移动网格的示例代码
Dec 14 HTML / CSS
CSS3实现的3D隧道效果
Apr 27 HTML / CSS
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
Sep 23 HTML / CSS
HTML5 canvas实现雪花飘落特效
Mar 08 #HTML / CSS
HTML5 用动画的表现形式装载图像
Mar 08 #HTML / CSS
HTML5离线缓存Manifest是什么
Mar 09 #HTML / CSS
html5 touch事件实现触屏页面上下滑动(一)
Mar 10 #HTML / CSS
html5 touch事件实现触屏页面上下滑动(二)
Mar 10 #HTML / CSS
html5 touch事件实现页面上下滑动效果【附代码】
Mar 10 #HTML / CSS
Html5 postMessage实现跨域消息传递
Mar 11 #HTML / CSS
You might like
WINXP下apache+php4+mysql
2006/11/25 PHP
php+mysql 实现身份验证代码
2010/03/24 PHP
JavaScript DOM 学习第二章 编辑文本
2010/02/19 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
2012/07/26 Javascript
jquery $(this).attr $(this).val方法使用介绍
2013/10/08 Javascript
document.forms用法示例介绍
2014/06/26 Javascript
推荐6款基于jQuery实现图片效果插件
2014/12/07 Javascript
NodeJS学习笔记之Connect中间件应用实例
2015/01/27 NodeJs
JavaScript中实现map功能代码分享
2015/06/11 Javascript
jquery实现全选、反选、获得所有选中的checkbox
2020/09/13 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
2016/03/22 Javascript
最棒的Angular2表格控件
2016/08/10 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
JavaScript实现审核流程状态的动态显示进度条
2017/03/15 Javascript
微信小程序 同步请求授权的详解
2017/08/04 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
[01:20]DOTA2 2017国际邀请赛冠军之路无止竞
2017/06/19 DOTA
[00:12]2018DOTA2亚洲邀请赛 Sccc亮相SOLO赛,今年他又会有什么样的战绩?
2018/04/06 DOTA
[01:00:59]VP VS VG Supermajor小组赛胜者组第二轮 BO3第二场 6.2
2018/06/03 DOTA
[22:07]DOTA2-DPC中国联赛 正赛 iG vs Magma 选手采访
2021/03/11 DOTA
Python实现类继承实例
2014/07/04 Python
简单说明Python中的装饰器的用法
2015/04/24 Python
Python中的hypot()方法使用简介
2015/05/18 Python
windows下python安装paramiko模块和pycrypto模块(简单三步)
2017/07/06 Python
如何用Python实现简单的Markdown转换器
2018/07/16 Python
Appium Python自动化测试之环境搭建的步骤
2019/01/23 Python
keras K.function获取某层的输出操作
2020/06/29 Python
flask框架中的cookie和session使用
2021/01/31 Python
一款基于css3的动画按钮代码教程
2014/11/23 HTML / CSS
Urban Outfitters德国官网:美国跨国生活方式零售公司
2018/05/21 全球购物
澳大利亚领先的女帽及配饰公司:Morgan&Taylor
2019/12/01 全球购物
Monki官网:斯堪的纳维亚的独立时尚品牌
2020/11/09 全球购物
房屋授权无偿使用证明
2014/11/29 职场文书
采购员岗位职责
2015/02/03 职场文书
2015年技术工作总结范文
2015/04/20 职场文书
PHP 时间处理类Carbon
2022/05/20 PHP