文档章节

HTML5桌面通知:notification api

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

「深度学习福利」大神带你进阶工程师,立即查看>>>

    对于在做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
博文 43
码字总数 16647
作品 0
程序员
私信 提问
加载中
请先登录后再评论。
用vertx实现高吞吐量的站点计数器

工具:vertx,redis,mongodb,log4j 源代码地址:https://github.com/jianglibo/visitrank 先看架构图: 如果你不熟悉vertx,请先google一下。我这里将vertx当作一个容器,上面所有的圆圈要...

jianglibo
2014/04/03
4.2K
3
Swift百万线程攻破单例(Singleton)模式

一、不安全的单例实现 在上一篇文章我们给出了单例的设计模式,直接给出了线程安全的实现方法。单例的实现有多种方法,如下面: class SwiftSingleton { } 这段代码的实现,在shared中进行条...

一叶博客
2014/06/20
3.5K
16
beego API开发以及自动化文档

beego API开发以及自动化文档 beego1.3版本已经在上个星期发布了,但是还是有很多人不了解如何来进行开发,也是在一步一步的测试中开发,期间QQ群里面很多人都问我如何开发,我的业余时间实在...

astaxie
2014/06/25
2.7W
22
桌面即时贴软件--GloboNote

GloboNote 是一个桌面记事软件,可帮你创建待办事宜、提醒和其他笔记信息。无限制即时贴的数量,可分组整理,支持搜索,可定制文本的显示格式(字体、颜色和大小),可将某个即时贴始终显示在...

匿名
2013/01/21
6.8K
1
Flash 皮肤样式--Windows8UIStyle

Windows8UIStyle 模仿 Windows 8 的桌面用户界面,使得 FlashSwing 应用程序在 Windows 8 系统中拥有与传统应用程序一致的用户界面。 Windows8UIStyle 对 FlashSwing 默认主题的修改: 提供和...

Gregary
2013/02/19
1.3K
1

没有更多内容

加载失败,请刷新页面

加载更多

汇总一下 Intellij IDEA 常用的牛逼插件!

来源:blog.csdn.net/sunny243788557/java/article/details/106011723 1、日晒主题 Solarized Themes 2、idea上 类调用时序图 SequenceDiagram for IntelliJ IDEA 3、彩色括号 Rainbow Brac......

路人甲Java
昨天
0
0
StringBuider 在什么条件下、如何使用效率更高?

点击上方“方志朋”,选择“设为星标” 回复”666“获取新整理的面试文章 作者:后青春期的Keats cnblogs.com/keatsCoder/p/13212289.html 引言 都说 StringBuilder 在处理字符串拼接上效率要...

方志朋
昨天
0
0
预告|悬镜子芽:新一代灰盒安全测试技术实践分享

点击蓝字 关注我们 万物皆有法,方能有序运行。网络安全进化到内生安全时代,以框架为起点,规划全景,技术内生外长,不断叠加,形成新一代网络安全之道。2020北京网络安全大会(BCS2020)已...

悬镜
昨天
0
0
zoom免费用户无法在中国登陆,RHUB免费续航zoom

中美关系日趋紧张,许多产品强制要求用户站队,zoom已经做了选择,抛弃众多信任、认可zoom产品的用户。微软选择坚持为中国用户提供服务,谁又说得来明天会如何?我们如此泱泱大国,竟要受制于...

osc_gt7nq50v
5分钟前
0
0
kubernetes 安装笔记

ssh -p 9000 root@127.0.0.1 192.168.56.101 master-node 192.168.56.102 work-node1 192.168.56.103 work-node2 由于kubeadm 默认从官网k8s.grc.io下载所需镜像,国内无法访问,因此需要通过......

solate
6分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部