突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)


Posted in HTML / CSS onJanuary 31, 2013

前面已经总结了主要的API扩展,下面几个扩展只有在专用的场合才会发挥最大的作用,这里简单了解一下。下面这些特性无一例外,IE均不支持。应用缓存和服务端消息在其他的主流浏览器中都是支持的。桌面通知目前只有Chrome支持。
应用缓存
很多时候,我们需要缓存一些不经常改变的页面来提高访问速度;而且对于某些应用,我们也希望在离线的情况下也可以使用。在HTML5中,你可以通过一个称之为“应用缓存”的技术很方便的实现这些功能。
在应用缓存的实现中,HTML5允许我们创建一个缓存manifest文件来方便的生成一个离线版的应用。
实现步骤
1. 启用页面的缓存,很简单,只需要在document的html中包含manifest属性:

复制代码
代码如下:

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

每一个包含这个manifest属性的页面当用户访问的时候都会被缓存。如果manifest属性没有指定的话,将不会缓存(除非网页被直接在manifest文件中指定)。manifest文件扩展名还没有统一的标准,推荐的扩展名是".appcache"。
2. 服务器端配置manifest文件的MIME类型
一个manifest文件需要被正确的MIME-type支持,这种文件类型为"text/cache-manifest"。必须在所使用的web服务器上进行配置。例如:Apache 中可在 .htaccess 中添加: AddType text/cache-manifest manifest。
3.编写manifest文件
manifest文件是一个简单的文本文件,告诉了浏览器去缓存什么内容(或者不缓存什么内容)。
manifest文件包含下面三个部分:
• CACHE MANIFEST - 在这个列表标题下的文件将会在下载后被缓存。
• NETWORK - 在这个列表标题下的文件将要求连接到服务器,不会进行缓存。
• FALLBACK - 在这个列表标题下的文件如果不能访问时,则显示特定的页面。
完整的一个文件如下面的例子所示:
复制代码
代码如下:

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html5/ /offline.html

提示:
#开头的代表注释。
*可以用表示所有的其它资源或者文件。例如:
复制代码
代码如下:

NETWORK:
*

表示所有的资源或者文件都不会缓存。
4.更新缓存
一旦一个应用被缓存,它将保持缓存除非一下情况发生:
• 用户删除了缓存
• manifest文件被修改
• 应用缓存被程序修改
所以一旦文件被缓存,除了人为的修改情况,浏览器将会持续的显示缓存版本内容,即使你修改了服务器文件。为了让浏览器更新缓存,你只能去修改manifest文件。
:以"#"开始的行是注释行,但是可以有其它用处。如果你的修改只涉及到一个图片或者javascript功能,那些变化是不会被重新缓存的。在注释中更新日期和版本是让浏览器重新缓存你的文件的一个方法
:浏览器可以有很多不同大小限制的缓存数据(有些浏览器允许5M的缓存数据)。
复制代码
代码如下:

<strong>服务端消息</strong>
还有一个经常使用的场景是:当服务端的数据发生变化时,如何让客户端知道?这在以前的做法是:页面主动去查询服务端是否有更新。根据前面的介绍,我们知道,使用WebSocket可以实现双向通讯。这里再介绍另外一个HTML5中新特性:服务端消息(Server-Sent Events)。
在HTML5中,承载这项特性的对象是EventSource对象。
使用步骤如下:
1.检查浏览器对EventSource对象的支持性,这个大家都知道了:
复制代码
代码如下:

if(typeof(EventSource)!=="undefined")
{
// Yes! Server-sent events support!
// Some code.....
}else {
// Sorry! No server-sent events support..
}

2.服务器端的发送消息代码
服务器端的发送更新消息很简单:设置content-type头信息为”text/event-stream"后,你就可以发送事件。以ASP代码为例:
复制代码
代码如下:

<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: >> 服务器时间" & now())
Response.Flush()
%>

3.浏览器端的接收消息代码
复制代码
代码如下:

var source=new EventSource("demo_sse.php");
source.onmessage=function(event){
document.getElementById("result").innerHTML+=event.data + "
";
};

代码说明:
• 创建一个EventSource对象,指定发送更新的页面URL (这里是demo_see.jsp)
• 每一次一个更新接收后,onmessage事件就触发
• 当onmessage时间触发,将得到的数据设置到id="result"的元素中
EventSource对象除了onmessage事件外,还有处理错误的onerror事件,连接建立的onopen事件等。
桌面通知 - 准HTML5特性
桌面通知功能能够让浏览器即使是最小化状态也能将消息通知给用户。这和WebIM是最为天然的结合。不过,目前支持该特性的浏览器只有Chrome。弹窗是大家深恶痛绝的东西,所以开启这项特性需要得到用户的许可。
复制代码
代码如下:

<script>
function RequestPermission(callback) {
window.webkitNotifications.requestPermission(callback);
}
function showNotification() {
//通过window.webkitNotifications判断浏览器是否支持notification
if (!!window.webkitNotifications) {
if (window.webkitNotifications.checkPermission() > 0) {
RequestPermission(showNotification);
} else {
var notification =window.webkitNotifications.createNotification("[imgurl]","Title","Body");
notification.ondisplay = function() {
setTimeout('notification.cancel()', 5000);
}
notification.show();
}
}
}
</script>

浏览器中打开此页面,就会看到桌面的右下角弹出一个持续5秒钟的消息窗口。
这项特性使用起来很简单,但是在实际操作的过程中,应该尽量减少通知功能对用户的干扰,最大程度的减少通知功能的出现。
下面是网上高手做这个应用的一些经验
1. 收到多条消息时确保只出现一条通知;
这个问题比较好解决,因为通知对象拥有一个名为"replaceId"的属性。指定该属性后,只要是相同replaceId的通知窗口弹出,都会覆盖之前弹出的窗口。在实际项目中是给所有的弹出窗口赋了一个相同的replaceId。不过需要注意的是,这种覆盖行为只在同域下有效。
2. 当用户处于IM出现的页面中时(页面处于Focus状态)将不出现通知;
这个问题主要是在于判断浏览器窗口是否处于Focus状态,目前除了监听window的onfocus和onblur事件之外,貌似没有更好的方式。在项目中就是通过这种方式来记录窗口的Focus状态,然后当消息到达时根据Focus状态来判断是否弹出窗口。
复制代码
代码如下:

$(window).bind( 'blur', this.windowBlur).bind( 'focus', this.windowFocus);

使用该方法需要注意的地方是,事件注册的事件点应该尽可能的靠前,如果注册太晚则当用户打开页面后再离开就会很容易出现状态的误判。
3. 当用户使用多Tab开启多个存在IM的页面时,只要有一个页面处于Focus状态将不出现通知;
多页面间的状态共享可以通过本地存储来实现:
• 浏览器窗口Focus时修改本地存储中指定key的值为"focus"
• 浏览器窗口Blur时修改本地存储中指定key的值为"blur"。
需要注意的是,Chrome下从一个Tab切换到另一个Tab时,Blur有可能比Focus后写入存储中,因此修改Focus状态时需要异步处理。
复制代码
代码如下:

/*window on focus事件*/
//用延时是为了解决多个Tab之间切换时,始终让Focus覆盖其他Tab的Blur事件
//注: 如果在点击Tab之前没有Focus到document上则点击Tab是不会触发Focus的
setTimeout( function(){
Storage.setItem( 'kxchat_focus_win_state', 'focus' );
}, 100);
/*window on blur事件*/
Storage.setItem( 'kxchat_focus_win_state', 'blur' );

实现以上状态共享后,新的消息到达后,只需要查看本地存储中’kxchat_focus_win_state’的值是否为blur,如果为blur才弹出窗口。
4. 如何让用户点击通知浮动层即可定位到具体的聊天窗口
通知窗口支持onclick等事件响应,而响应函数中的作用范围属于创建该窗口的页面。如下代码:
复制代码
代码如下:

var n = dn.createNotification(
img,
title,
content
);
//确保只有一个提醒
n.replaceId = this.replaceId;
n.onclick = function(){
//激活弹出该通知窗口的浏览器窗口
window.focus();
//打开IM窗口
WM.openWinByID( data );
//关闭通知窗口
n.cancel();
};

在onclick的响应函数中访问的window对象即属于当前创建页面,因此可以很方便的与当前页面进行交互。以上代码便实现了点击弹出窗口会跳转到对应的浏览器窗口和打开IM窗口。
:页面中的相关事件很多时候具有不确定的时序性,所以我们的代码尽量不要假设某些事件触发的顺序是一定的。比如上面的blur和focus事件

实用参考:
官方文档:http://www.w3schools.com/html5/
html5的一个中文教程:http://www.gbin1.com/tutorials/html5-tutorial/

HTML / CSS 相关文章推荐
纯css3实现走马灯效果
Dec 26 HTML / CSS
CSS3制作圆形滚动进度条动画的示例
Nov 05 HTML / CSS
CSS3实现莲花绽放的动画效果
Nov 06 HTML / CSS
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
Mar 14 HTML / CSS
html5视频播放_动力节点Java学院整理
Jul 13 HTML / CSS
HTML5 Canvas自定义圆角矩形与虚线示例代码
Aug 02 HTML / CSS
使用phonegap克隆和删除联系人的实现方法
Mar 31 HTML / CSS
html5简单示例_动力节点Java学院整理
Jul 07 HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
Jul 28 HTML / CSS
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
Aug 28 HTML / CSS
HTML实现仿Windows桌面主题特效的实现
Jun 28 HTML / CSS
CSS中理解层叠性及权重如何分配
Dec 24 HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
Jan 31 #HTML / CSS
突袭HTML5之Javascript API扩展3—本地存储全新体验
Jan 31 #HTML / CSS
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
Jan 31 #HTML / CSS
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
Jan 31 #HTML / CSS
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
Jan 30 #HTML / CSS
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
Jan 30 #HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
Jan 30 #HTML / CSS
You might like
德劲1104的电路分析与改良
2021/03/01 无线电
php 静态化实现代码
2009/03/20 PHP
PHP常用代码大全(新手入门必备)
2010/06/29 PHP
php array的学习笔记
2012/05/16 PHP
php实现的一个很好用HTML解析器类可用于采集数据
2013/09/23 PHP
php防止sql注入代码实例
2013/12/18 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十六)
2014/06/30 PHP
js中判断Object、Array、Function等引用类型对象是否相等
2012/08/29 Javascript
iframe中子父类窗口调用JS的方法及注意事项
2015/08/25 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
2015/12/25 Javascript
js实现随机抽选效果、随机抽选红色球效果
2017/01/13 Javascript
浅谈angularJS的$watch失效问题的解决方案
2017/08/11 Javascript
详解nvm管理多版本node踩坑
2019/07/26 Javascript
JavaScript 空间坐标的使用
2020/08/19 Javascript
[03:02]2014DOTA2西雅图邀请赛 让队员自己告诉你DK NAVI备战情况
2014/07/08 DOTA
python监测当前联网状态并连接的实例
2018/12/18 Python
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
python GUI库图形界面开发之PyQt5树形结构控件QTreeWidget详细使用方法与实例
2020/03/02 Python
在Mac中PyCharm配置python Anaconda环境过程图解
2020/03/11 Python
Python之关于类变量的两种赋值区别详解
2020/03/12 Python
python爬虫请求头设置代码
2020/07/28 Python
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
2012/12/09 HTML / CSS
Eyeko美国:屡获殊荣的睫毛膏、眼线笔和眉妆
2018/07/05 全球购物
英国最大的自有市场,比亚马逊便宜:Flubit
2019/03/19 全球购物
《音乐之都维也纳》教学反思
2014/04/16 职场文书
保证书格式范文
2014/04/28 职场文书
2014离婚协议书范文
2014/09/10 职场文书
2014年社区计生工作总结
2014/11/18 职场文书
办公楼租房协议书范本
2014/11/25 职场文书
夫妻分居协议书范本
2014/11/28 职场文书
会议主持词开场白
2015/05/28 职场文书
好人好事新闻稿
2015/07/17 职场文书
运动会1000米加油稿
2015/07/21 职场文书
2019年聘任书的写作格式及范文!
2019/07/03 职场文书
关于使用Redisson订阅数问题
2022/01/18 Redis
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python