文档章节

HTML5桌面通知:notification api

Rickxue
 Rickxue
发布于 2015/12/07 19:10
字数 264
阅读 270
收藏 15

    对于在做PC网页端的一些消息提醒,这个还是蛮有用的。通过html5的audio声音提醒 ,加上html5的notification浏览器消息弹出提醒,提高交互体验。

    整个流程是:

    1.浏览器初始化的时候,就判断该浏览器是否支持Notification,假设浏览器支持,并且用户也同意发送信息。

    2.判断是否有新消息?

    3.如果有新消息,先给予声音提醒.再给予浏览器Notification提醒。

    

//这里的可以隐藏音频组件。
<audio id="tipAudio"  style="position:absolute;top:0;left:0;z-index:-1">
   <source src="../include/image/tipAudio.ogg" type="audio/ogg">
   <source src="../include/image/tipAudio.mp3" type="audio/mpeg">
</audio>


function  notify(){
    $("#tipAudio")[0].play();
    
    if(window.Notification){
	if(Notification.permission==='granted'){
	//icon_url 图片资源,title:消息标题,content:消息内容
	    var notification = new Notification(title,{ "icon": icon_url,"body":content});
	   }else {
	     Notification.requestPermission();
	   };
    }
}

© 著作权归作者所有

共有 人打赏支持
Rickxue
粉丝 5
博文 41
码字总数 14418
作品 0
程序员
desktopnotify - 浏览器notification API调用库

这几天研究了一下浏览器的notification通知API的使用,使用它的好处是,当浏览器不是当前打开的窗口时,如果页面上调用了notification API的话,会在桌面上弹出小窗口显示一条消息。并且这个...

limodou
2013/09/26
0
0
HTML5中的Web Notification桌面通知(右下角提示)

html5桌面通知(Web Notifications)对于需要实现在新消息入线时,有桌面通知效果的情况下非常有用,在此简单介绍一下这个html5的新属性。通过Web Notifications(桌面通知系统),网站可以在用...

祈澈姑娘
04/19
0
0
HTML5 不可限量的发展前景

现在的HTML5就像当年崭露头角时的Ajax,有人在做,但不知道叫它什么。最近,苹果在HTML5上大做文章,而著名的Web设计师Eric Meyer则提出了Web Stacks的概念。Alex Kessinger是Yahoo的一名前端...

晨曦之光
2012/03/09
0
0
第139天:详解cookie、 sessionStorage 和localStorage

1.cookie:存储在用户本地终端上的数据。有时也用cookies,指某些网站为了辨别用户身份,进行session跟踪而存储在本地终端上的数据,通常经过加密。一般应用最典型的案列就是判断注册用户是否...

半指温柔乐
01/08
0
0
【Cloud Foundry 应用开发大赛】todolist,日常管理应用

应用名称:todolist 应用URL地址:http://todolist.cloudfoundry.com/ 测试账号 test@test.com testtest 应用说明及使用场景: 用于日常随手记录,合理的安排会帮你更高效的生活。 年底工作事...

lanx
2013/01/23
0
25

没有更多内容

加载失败,请刷新页面

加载更多

下一页

八大包装类型的equals方法

先看其中一个源码 结论:八大包装类型的equals方法都是先判断类型是否相同,不相同则是false,相同则判断值是否相等 注意:包装类型不能直接用==来等值比较,否则编译报错,但是数值的基本类型...

xuklc
40分钟前
1
0
NoSQL , Memcached介绍

什么是NoSQL 非关系型数据库就是NoSQL,关系型数据库代表MySQL 对于关系型数据库来说,是需要把数据存储到库、表、行、字段里,查询的时候根据条件一行一行地去匹配,当量非常大的时候就很耗...

TaoXu
昨天
0
0
890. Find and Replace Pattern - LeetCode

Question 890. Find and Replace Pattern Solution 题目大意:从字符串数组中找到类型匹配的如xyy,xxx 思路: 举例:words = ["abc","deq","mee","aqq","dkd","ccc"], pattern = "abb"abc ......

yysue
昨天
1
0
Linux | Redis

写在前面的话 常言道,不作笔记不读书。在下是深有体会啊,所以,跟我一起做下本节的笔记吧,或许多年以后,你一定会感谢今天的你。 安装 在官网的下载页 Redis Download 直接写了在Linux的安...

冯文议
昨天
2
0
NoSQL-memcached

NoSQL介绍 NoSQL叫非关系型数据库。而关系型数据库代表有MySQL。对于关系型数据库来说,是需要把数据存储到库、表、行、字段里,查询的时候根据条件一行一行地去匹配,当量非常大的时候就很...

ln97
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部