標籤：
應用緩衝機制可以參考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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
