Html5應用程序緩存ApplicationCache

時間 2019-12-06

標籤 html5 html 應用程序緩存 applicationcache 欄目 HTML5 简体版

原文原文鏈接

應用緩存機制能夠參考http://www.w3school.com.cn/html5/html_5_app_cache.asp，再也不贅述。利用此機制，html5遊戲能夠實現和native app相似的更新和運行環境，減小文件的頻繁下載。html

1. Server設置：

nginx, 修改manifest文件的mime type映射，打開文件$nginx/conf/mime.types，增長html5

text/cache-manifest                   manifest;

2. 網頁文件設置：

在index.html的<html>標籤修改python

<html manifest="jstest.manifest">

其中jstest.manifest文件爲緩存控制文件（測試起得名字），與index.html同級目錄nginx

3. manifest文件:

包含3個段, CACHE, NETWORK, FALLBACKjson

CACHE: 能夠緩存起來的部分，離線可用瀏覽器

NETWORK: 永遠不會被緩存，且離線時是不可用的緩存

FALLBACK: 規定若是沒法創建因特網鏈接，則用 "offline.html" 替代 /html5/ 目錄中的全部文件app

CACHE MANIFEST
#version 2014-12-20 15:02: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