DDR爱好者之家 Design By 杰米
前面已经总结了主要的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事件
应用缓存
很多时候，我们需要缓存一些不经常改变的页面来提高访问速度；而且对于某些应用，我们也希望在离线的情况下也可以使用。在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/
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
暂无评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。
更新日志
2024年11月24日
2024年11月24日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]