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

点击List Cache Entries即可查看应用缓存

Html5应用程序缓存ApplicationCache的更多相关文章

  1. HTML5应用程序缓存实现离线Web网页或应用

    HTML5应用程序缓存和浏览器缓存的区别.(有些)浏览器会主动保存自己的缓存文件以加快网站加载速度.但是要实现浏览器缓存必须要满足一个前提,那就是网络必须要保持连接.如果网络没有连接,即使浏览器启用了 ...

  2. HTML5: HTML5 应用程序缓存

    ylbtech-HTML5: HTML5 应用程序缓存 1.返回顶部 1. HTML5 应用程序缓存 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线 ...

  3. cookie，sessionStorage，loclaStorage，HTML5应用程序缓存

    cookie Cookie 是一些数据,由服务器生成,发送给浏览器,一旦用户从该网站或服务器退出,Cookie 就存储在用户本地的硬盘上,下一次请求同一网站时会把该cookie发送给服务器.Cooki ...

  4. 【HTML5】浅析HTML5应用程序缓存（ApplicationCache）

    一.为什么需要Web应用程序缓存 在移动互联网时代,设备终端位置不再固定,依赖无线信号,网络的可靠性变得降低,比如坐在火车上,过了一个隧道(15分钟),便无法访问网站,这对于web的伤害是很大的    ...

  5. HTML5应用程序缓存Application Cache

    什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...

  6. HTML5应用程序缓存Application Cache详解

    什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...

  7. HTML5之appcache语法理解/HTML5应用程序缓存/manifest缓存文件官方用法翻译

    习惯性的贴几个参考链接: W3School-HTML 5 应用程序缓存 官方 MDN window.applicationCache 接口文档 官方 MDN 用法示例 看所有的教程不如直接看最原始的官 ...

  8. HTML5应用程序缓存Application Cache详解.RP

    什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...

  9. HTML5应用程序缓存Application Cache.RP

    什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...

随机推荐

  1. 对象化前端表单（Form）提交

    很常见的业务场景,就是前端一个表单,submit给后台,在web.form时代,有from 的runat="server" 配合submit 自动会提交给服务端,然后服务端解析Re ...

  2. Elasticsearch升级1.5版本暴露jdk的bug

    把测试环境的Elasticsearch升级到1.5.1版本,启动的时候报错: [root@node2 elasticsearch-1.5.1]# bin/service/elasticsearch s ...

  3. Expression Tree Basics 表达式树原理

    variable point to code variable expression tree data structure lamda expression anonymous function 原 ...

  4. vim 图

  5. sip常用消息实体参考（系网上摘抄，感谢分享）

    1.MESSAGE消息       1)头字段填写说明       Call-id:                 必选       CSeq:                   必选       ...

  6. 阿里云SLB后Nginx、Tomcat获取真实IP

    一.SLB后Nginx如何获取真实IP 前提:nginx作为slb获取真实ip是使用 http_realip_module,默认一键安装包安装的nginx没有安装这个模块需要重新重新编译nginx并加 ...

  7. CSS的clip-path 一

    首先介绍一下,我觉得前端开发都是很具有分享精神的,很多人都写出了很多优秀的总结经验供新手们参考,本人只是个搬运工,将别人优秀的文章进行了总结,本文主要转载自  大漠  的文章  http://www. ...

  8. cookie小记

    清除cookie可用下面2种的方法.注意如果要清除的cookie的域是指定的,则这里也应该指定,否则无效                1:                Response.Cooki ...

  9. Android加载SD卡目录，文件夹遍历，图片设置，设置文件对应打开方式等

    此案例主要说的是Android使用GridView加载SD卡下所有目录,文件夹多层遍历,文件图标修改,设置文件对应打开方式等功能. 如图: 代码: public class GridViewFile ...

  10. ffmpeg 音频转换: use ffmpeg convert the audio from stereo to mono without changing the video part

    To convert the audio from stereo to mono without changing the video part, you can use FFmpeg: ffmpeg ...