应用缓存机制可以参考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

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 ...

随机推荐

VMware 安装CentOS7.0
最后 1 2 q yes 就这样,我的可以了
DGV表头双行
try { if (e.RowIndex < 0) { RectangleF _rect = e.CellBounds; Pen _pen = new Pen(Color.Black); Pen ...
机器学习--Classifier comparison
最近在学习机器学习,学习和积累和一些关于机器学习的算法,今天介绍一种机器学习里面各种分类算法的比较 #!/usr/bin/python # -*- coding: utf-8 -*- "&q ...
MySql的连接查询
类似于oracle的连接查询,mysql连接查询也有左外连接.右外连接.内连接查询.但是,不同的是没有直接的全外连接查询. 这里介绍MySql的连接查询: 这里已两张表为例:STUDENT 表和 ...
Linux Svn 安装过程及配置
重要的是第一步的安装,第二步配置可能没用,但是没试过,因为服务器上已经安装了第一步. 此处的第二步只为做个记录,说明一下里边的配置文件的用途. 3. 自己实际操作中的的配置记录(参照服务器别人的配置记 ...
C# 配置文件 AppSettings和ConnectionStrings的区别
web.config是web应用程序的配置文件,为web应用程序提供相应配置(B/S).app.config是桌面应用程序的配置文件,为桌面应用程序提供相应配置(C/S).Configuratio ...
Unity开发心路历程——制作画板
有人说编程是份很无聊的工作因为整个工作时间面对的都是电脑这种机器因为眼睛盯着的内容都是索然无味的代码因为总是会有意想不到的bug让你怀疑自己的智商而我认为编程是件及其有意思的事情可观的收 ...
JS valueOf与字符串
js在处理字符串和数值加运算的时候会转换数值为字符串然后执行字符串连接在覆盖String.prototype.valueOf之前,new String(111)这样的字符串与数值加法也是字符串连接 ...
linux批量复制或删除同命名规则的文件
如图所示,有多个不同后缀的文件,但他们的前缀都是"QC_TZ.impute." 此时想批量复制图中的文件的话,可以考虑用命令行 cp QC_TZ.impute.* /your/de ...
JQuery源码解析--callbacks
(function (global, factory) { factory(global); })(this, function (window, noGlobal) { var rootjQuery ...

Html5应用程序缓存ApplicationCache