HTML5 Application Cache Applicationcache

Application caching mechanism can refer to http://www.w3school.com.cn/html5/html_5_app_cache.asp, no longer repeat. With this mechanism, HTML5 games can be implemented with native app similar to the update and operating environment, reduce the frequent download of files.

1. Server settings:

Nginx, modify the MIME type mapping of the manifest file, open the file $nginx/conf/mime.types, add

Text/cache-manifest                   manifest;

2. Web File Settings:

<manifest= "jstest.manifest">

Where the Jstest.manifest file is a cache control file (the name of the test), and the index.html sibling directory

3. manifest file:

Contains 3 segments, CACHE, NETWORK, FALLBACK

Cache: The part that can be cached, available offline

NETWORK: Will never be cached and is not available offline

FALLBACK: Specifies that if an Internet connection cannot be established, replace all files in the/html5/directory with "Offline.html"

--£ º29.247754cache:res/  Closenormal.pngres/closeselected.pngres/favicon.icores/helloworld.pngsrc/ Aaa.jsmain.jsproject.jsonNETWORK:FALLBACK:

The first line, CACHE MANIFEST, is required to specify that this file is a MANIFEST file

The second line, #version注释, marks the version number, because the app's cache is updated when its manifest file changes, so the cache is updated every time the version number is updated

Test the game with COCOS2D-HTML5, found that the second load will be reported CC undefined, because the engine's JS file is not cached.

Workaround: Write a Python script to automatically generate the manifest file, where the cache section uses the traversal method to join the file traversal in the FRAMEWORKS/COCOS2D-HTML5 directory, eliminating the need for modules. For example:

defListdir (root, Exceptarr, result): forIteminchOs.listdir (Root): filepath= root +"/"+ItemifItem.startswith ("."):Continue 　　 ifOs.path.isdir (filepath):ifFilePathinchExceptarr: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 is stored in enginelist

Another idea is to the engine files through the UGLIFYJS and other tools to compress into a JS file, but in COCOS2D-HTML5 v3.1 environment, some modules are dynamically loaded according to the running environment, choose which script compression compared to the headache, after the experiment abandoned this method.

4. manifest file update and Game update:

As mentioned above, notify the browser to update the file by #version xxx changes to the Jstest.manifest file.

The browser automatically downloads updates based on manifest, but before the game starts, it needs to make sure that the scripts, resources, and so forth are updated to the latest version before entering the game.

The Window.applicationcache object can be used to get the update progress in the JS script.

varCache =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 ();}

When the browser caches the app for the first time, the update status is: Ondownloading, OnProgress (*n), oncached;

Load again, if the manifest file does not change, the status is: Onnoupdate;

Load again, if the manifest file has changed, the status is: OnProgress (*n), onupdateready; you need to call Applicationcache.swapcache () after the update is complete to update to the latest resource. Otherwise, the original cache is used.

5. Browser View App Cache

I am using the Firefox browser, the address bar input About:cache can view the Web cache and the application 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

Click List cache entries to view the app cache

HTML5 Application Cache Applicationcache