文档章节

HTML5桌面通知:notification api

Rickxue
 Rickxue
发布于 2015/12/07 19:10
字数 264
阅读 261
收藏 15
点赞 0
评论 0

    对于在做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
博文 34
码字总数 12890
作品 0
程序员
HTML5中的Web Notification桌面通知(右下角提示)

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

祈澈姑娘 ⋅ 04/19 ⋅ 0

Android 4.4 WebView实现WebSocket即时通讯

参考博客 Android HTML5多线程&本地缓存&文件上传 Websocket协议的学习、调研和实现 Android版本要求及H5 api支持情况 在Android版本4.4之前,由于维护和开发Android版本时使用的是AppleWebk...

IamOkay ⋅ 2016/03/21 ⋅ 4

H5本地存储一

localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用。sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同意可...

刘梓航 ⋅ 2014/10/27 ⋅ 2

扣丁学堂HTML5培训课程怎么样

  在如今,随着移动互联网技术的发展和进步,比如HTML5在移动互联端的应用,让更多人了解到它的丰富性趣味性便利性,但HTML5就包括这些么?扣丁学堂HTML5培训课程怎么样?零基础能学会么?...

扣丁学堂 ⋅ 06/01 ⋅ 0

HTML5学习之Web Storage基础知识

HTML5 Web 存储 在HTML5 Web Storage还没出来之前,本地存储使用的是 cookie. 但是Web 存储需要更加的安全与快速,这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可...

CHIEMINCHAN ⋅ 05/11 ⋅ 0

HTML5 本地存储Web Storage

Web Storage 功能,顾名思义,就是在web上针对客户端本地存储数据的功能,具体来说Web Storage 分为两种: sessionStorage: 将数据保存在session对象中,所谓session是指用户在浏览某个网站中...

nao ⋅ 2015/12/11 ⋅ 0

Web Storage 与cookies

Web Storage介绍 Web Storage带来的好处 减少网络流量:一旦数据保存在本地后,就可以避免再向服务器请求数据,因此减少不必要的数据请求,减少数据在浏览器和服务器间不必要地来回传递。快速...

黄黄黄 ⋅ 2017/11/17 ⋅ 0

HTML5 SVG 设计开源软件macSVG

macSVG是一款Mac OS平台下的HTML5网页设计及SVG 设计开源软件, 基于WebKit的用户界面, 包括Web检查器,可为桌面和移动平台上的HTML5 以及可缩放矢量图形视图生成动态,高质量图形和动画。 特...

marsdream ⋅ 05/30 ⋅ 0

html5-web本地存储

在html5中为我们提供了一种本地缓存机制,它将取代我们的cookie,并且它是不会随浏览器发会我们的服务器端的。我们可以采用js在客户端自由的操作本地缓存。html5中缓存主要有localStorage,和...

zting科技 ⋅ 2017/01/10 ⋅ 0

超级绚丽,20款前端动画特效,轰炸你的眼睛

前言 HTML5一个相当出色的web技术,它不仅可以让你更加方便地操纵页面元素,而且可以通过canvas实现更多的动画特效,引进HTML5标准后,CSS3也就可以发挥更大的作用。本文主要介绍了一些基于H...

浪漫程序员 ⋅ 04/25 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

JAVA RMI

什么是JAVA RMI Java RMI (Remote Method Invocation) 远程方法调用,能够让客户端像使用本地调用一样调用服务端 Java 虚拟机中的对象方法。RMI 是面向对象语言领域对 RPC (Remote Proced...

saulc ⋅ 21分钟前 ⋅ 0

Linux系统工程狮养成记

如今的社会,随着时代的发展,出现了很多职业,像电子类,计算机类的专业,出现了各种各样的工程师,有算法工程师,java工程师,前端工程师,后台工程师,Linux工程师,运维工程师等等,不同...

linux-tao ⋅ 31分钟前 ⋅ 0

进入编辑模式 vim命令模式 vim实践

1.

oschina130111 ⋅ 31分钟前 ⋅ 0

mysql用户管理、常用sql语句、mysql数据库备份恢复

1. mysql用户管理 mysql默认有一个root超级管理员账户,实际工作环境中不可能每个人都用此root权限,防止误操作、误删除,可以给单独的用户进行授权。 Mysql创建用户以及授权: grant all on...

laoba ⋅ 32分钟前 ⋅ 0

类型后面三个点(String...)和数组(String[])的区别

类型后面三个点(String…),是从Java 5开始,Java语言对方法参数支持一种新写法,叫可变长度参数列表,其语法就是类型后跟…,表示此处接受的参数为0到多个Object类型的对象,或者是一个Obj...

流氓兔- ⋅ 38分钟前 ⋅ 0

JEPLUS表格组件之表格合并——JEPLUS软件快速开发平台

JEPLUS表格组件之表格合并 我们在列表配置时会遇见这样的一种情况,需要对个人的数据进行统一化,对一些数据进行归类,这样展示出来美观又直观,在这篇笔记中我来给大家介绍下如何配置出来专...

JEPLUS ⋅ 39分钟前 ⋅ 0

golang 并发中全局唯一操作

package main// go 携程共享 数据// 加锁解锁操作// 同步锁import ("sync""fmt")// 创建Once结构var once = sync.Once{}func computed(data *int, lock *sync.Mut...

304158 ⋅ 39分钟前 ⋅ 0

Mobx入门之二:asynchronous actions

这一节主要看mobx怎么实现asynchronous actions 1 要实现的demo功能 输入地名,查询天气,利用openweathermap api 2 思想 observable观察数据:location地点、temperature温度 observer响应式...

pengqinmm ⋅ 42分钟前 ⋅ 0

【2018.0620学习笔记】【linux高级知识 13.4-13.6】

13.4 mysql用户管理 创建用户并授权: grant all on *.* to '用户名'@'ip' identified by '密码' //all是操作权限,*.*是库.表,指定格式是'用户名'@'localhost'才能用socket登录本地 gra...

lgsxp ⋅ 今天 ⋅ 0

Java强弱引用示例

package jdk;import java.lang.ref.PhantomReference;import java.lang.ref.ReferenceQueue;import java.lang.ref.SoftReference;import java.lang.ref.WeakReference;public ......

月下狼 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部