Html5应用程序缓存ApplicationCache
应用缓存机制可以参考http://www.w3school.com.cn/html5/html_5_app_cache.asp，不再赘述。利用此机制，html5游戏可以实现和native app类似的更新和运行环境，减少文件的频繁下载。
1. Server设置：
nginx, 修改manifest文件的mime type映射，打开文件$nginx/conf/mime.types，增加
text/cache-manifest manifest;
2. 网页文件设置：
在index.html的<html>标签修改
<html manifest="jstest.manifest">
其中jstest.manifest文件为缓存控制文件（测试起得名字），与index.html同级目录
3. manifest文件:
包含3个段, CACHE, NETWORK, FALLBACK
CACHE: 可以缓存起来的部分，离线可用
NETWORK: 永远不会被缓存，且离线时是不可用的
FALLBACK: 规定如果无法建立因特网连接，则用 "offline.html" 替代 /html5/ 目录中的所有文件
CACHE MANIFEST
#version -- ::29.247754 CACHE:
res/CloseNormal.png
res/CloseSelected.png
res/favicon.ico
res/HelloWorld.png
src/aaa.js
main.js
project.json NETWORK: FALLBACK:
第一行，CACHE MANIFEST，是必须的，指定此文件为manifest文件
第二行，#version注释，标记版本号，因为应用的缓存会在其 manifest 文件更改时被更新，所以每次通过更新version号来更新缓存
用cocos2d-html5测试游戏，发现第二次加载会报cc undefined，原因是引擎的js文件并没有缓存。
解决方法：写一个python脚本自动生成manifest文件，其中CACHE段用遍历方法将frameworks/cocos2d-html5目录下的文件遍历加入，排除不需要模块。例如：
def listDir(root, exceptArr, result):
for item in os.listdir(root):
filepath = root + "/" + item
if item.startswith("."):
continue
if os.path.isdir(filepath):
if filepath in exceptArr:
continue
else:
listDir(filepath, exceptArr, result)
else:
result.append(filepath) engineList = [
"frameworks/cocos2d-html5/CCBoot.js",
"frameworks/cocos2d-html5/CCDebugger.js",
"frameworks/cocos2d-html5/moduleConfig.json",
"frameworks/cocos2d-html5/Base64Images.js"]
exceptList = ["frameworks/cocos2d-html5/cocos2d/physics",
"frameworks/cocos2d-html5/extensions",
"frameworks/cocos2d-html5/external"] listDir("frameworks/cocos2d-html5/cocos2d", exceptList, engineList)
#engine files are stored in engineList
另一个思路是将引擎文件通过uglifyjs等工具压缩为一个js文件，不过在cocos2d-html5 v3.1环境下部分模块是根据运行环境动态加载的，选取哪些脚本压缩比较头疼，试验后放弃此方法。
4. manifest文件更新与游戏更新：
如上面所提，通过jstest.manifest文件的#version xxx更改来通知浏览器进行更新文件。
浏览器会根据manifest自动下载更新，但是游戏启动前需要保证脚本、资源等更新到最新版本再进入游戏。
在js脚本中可以通过window.applicationCache对象来获取更新进度。
var cache = window.applicationCache;
cache.oncached = function() {
cc.game.run();
}
cache.oncheking = function() {
}
cache.ondownloading = function() {
}
cache.onerror = function() {
}
cache.onnoupdate = function() {
cc.game.run();
}
cache.onobsolete = function() {
}
cache.onprogress = function() {
}
cache.onupdateready = function() {
cache.swapCache();
cc.game.run();
}
当浏览器首次缓存应用时，更新状态依次为：ondownloading -> onprogress(*N) -> oncached;
再次加载，如果manifest文件无更改，状态依次为：onnoupdate；
再次加载，如果manifest文件有更改，状态依次为：onprogress(*N) -> onupdateready；更新完毕后需要调用applicationCache.swapCache()才会更新为最新资源，否则还是使用原来的缓存。
onprogress每更新完一个文件就会触发一次（包括.manifest文件本身），在Chrome下progress event有lengthComputable, total, loaded等属性，可以用total和loaded计算更新进度，但在firefox/safari下没有。
5. 浏览器查看应用缓存
我使用的是firefox浏览器，地址栏输入about:cache可以查看网页缓存和应用缓存
appcache
Number of entries: 274 Maximum storage size: 512000 KiB Storage in use: 1816 KiB Storage disk location: /Users/xxx/Library/Caches/Firefox/Profiles/9loj6ek4.default/OfflineCache List Cache Entries
点击List Cache Entries即可查看应用缓存
Html5应用程序缓存ApplicationCache的更多相关文章
- HTML5应用程序缓存实现离线Web网页或应用
HTML5应用程序缓存和浏览器缓存的区别.(有些)浏览器会主动保存自己的缓存文件以加快网站加载速度.但是要实现浏览器缓存必须要满足一个前提,那就是网络必须要保持连接.如果网络没有连接,即使浏览器启用了 ...
- HTML5: HTML5 应用程序缓存
ylbtech-HTML5: HTML5 应用程序缓存 1.返回顶部 1. HTML5 应用程序缓存 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线 ...
- cookie，sessionStorage，loclaStorage，HTML5应用程序缓存
cookie Cookie 是一些数据,由服务器生成,发送给浏览器,一旦用户从该网站或服务器退出,Cookie 就存储在用户本地的硬盘上,下一次请求同一网站时会把该cookie发送给服务器.Cooki ...
- 【HTML5】浅析HTML5应用程序缓存（ApplicationCache）
一.为什么需要Web应用程序缓存 在移动互联网时代,设备终端位置不再固定,依赖无线信号,网络的可靠性变得降低,比如坐在火车上,过了一个隧道(15分钟),便无法访问网站,这对于web的伤害是很大的 ...
- HTML5应用程序缓存Application Cache
什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...
- HTML5应用程序缓存Application Cache详解
什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...
- HTML5之appcache语法理解/HTML5应用程序缓存/manifest缓存文件官方用法翻译
习惯性的贴几个参考链接: W3School-HTML 5 应用程序缓存 官方 MDN window.applicationCache 接口文档 官方 MDN 用法示例 看所有的教程不如直接看最原始的官 ...
- HTML5应用程序缓存Application Cache详解.RP
什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...
- HTML5应用程序缓存Application Cache.RP
什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...
随机推荐
- IA32寄存器与x86-64寄存器的区别
IA32寄存器 一个IA32CPU包含一组8个存储32位值的通用寄存器,这些寄存器用来存储整数数据和指针: 31-0 15-0 15-8 7-0 使用惯例 %eax %ax %ah %al 调用者保存 ...
- Java继承，多态，组合应用
继承: 面向对象的三大特征之一: 是类和类之间的一种拓展关系,是一种从一般到特殊的关系; 格式: sub extends Super, 我们把sub称为子类或者拓展类, 把supe ...
- 扫盲贴000---关于python中的if __name__ == '__main__'
对于python中的__name__变量,根据调用python文件的方式不同,__name__变量的值也会不同.假如我有一个名为hello_world.py的python脚本,当我的目的是直接运行这个 ...
- Android两个子线程之间通信
Android中,相信主线程和子线程之间的通信大家都不陌生了吧.在一次面试经历中被问到了两个子线程之间是如何进行通信的.哎呦!这可蒙住我了.后来回家研究了下,分享给大家. 其实android中线程通信 ...
- 在Windows下编译扩展OpenCV 3.1.0 + opencv_contrib
为什么要CMake,这里我陈述自己的想法,作为一个刚使用opencv库的小白来说,有以下大概三点内容 1.由于在学习图像处理滤波器中,需要用到各种边缘保护滤波器(EPS)算法,但是这些算法在OpenC ...
- bootstrop验证手机号
formValidate($form,getRules(),getMessages()); function getRules(){ return { "memberViewVo.membe ...
- jQuery Mobile 工具栏
jQuery Mobile 工具栏 工具栏元素常被放置于页眉和页脚中 - 以实现"已访问"的导航: 标题栏 页眉通常会包含页眉标题/LOGO 或一到两个按钮(通常是首页.选项或搜索 ...
- WCF账户密码认证
记录一下我实现WCF用户认证与权限控制的实现方法, 也让其他网友少走一些弯路. 内容写得非常小白(因为我也是小白嘛), 比较详细, 方便WCF知识基础薄的朋友 主要分为下面几个步骤 作为例子, 创建最 ...
- redirect和forward
1.重定向 <mvc:view-controller path="/" view-name="redirect:/admin/index"/>即如果 ...
- node服务器
markdown support HTTP服务器 一.服务器基本方法 "use strict"; // 1.加载http模块 const http = require('http' ...