首页 > 代码库 > Html5应用程序缓存ApplicationCache
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 2014-12-20 15:02:29.247754CACHE:res/CloseNormal.pngres/CloseSelected.pngres/favicon.icores/HelloWorld.pngsrc/aaa.jsmain.jsproject.jsonNETWORK: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()才会更新为最新资源，否则还是使用原来的缓存。
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