应用缓存机制可以参考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. javascript冒泡算法

    var arr = [10, 10, 3, 2, 5 , 4, 8, 3]; function reSort(arr) { var temp = 0; var len = arr.length; fo ...

  2. SQL笔记1:SELECT及SELECT高级应用

      T-SQL笔记1:SELECT及SELECT高级应用 本章摘要 1:安装AdventureWorks 2:基本运算符和表达式 3:between 4:like 5:escape 6:TOP 7:G ...

  3. Qt窗口的屏幕居中显示

    QDesktopWidget *pDesk = QApplication::desktop(); login->move((pDesk->width() - login->width ...

  4. lua代码设置unity对象的基础属性

    设置对象的父节点: wall.transform:SetParent(GameObject.Find("Walls").transform) 设置颜色: wall:GetCompo ...

  5. 查linux端口连接情况用命令netstat

    查linux端口连接情况用命令netstat netstat -apn |grep cdnbest 或netstat –apn | grep 3320

  6. Android Studio新建一个HelloWorld 程序(App)

    Android Studio新建一个HelloWorld程序(App) 新建 或者直接启动程序(注:如果已有程序,此方法会直接打开最近一次关闭从程序) 更改App名 选择App运行平台 选择模板 更改 ...

  7. Oracle nvchar2和varchar2区别分析

    Oracle nvchar2和varchar2区别分析: [注意]VARCHAR2是Oracle提供的特定数据类型,Oracle可以保证VARCHAR2在任何版本中该数据类型都可以向上和向下兼容.VA ...

  8. quartz_job

    quartz--job job是执行任务所需的Java类. 在quartz中job分为两种,有状态和无状态的.job是无状态的,statefuljob是有状态的. 通过实现job或者statefulj ...

  9. lucene历史版本地址

    http://archive.apache.org/dist/lucene/java/

  10. 转发(forward)和重定向(sendRedirect)

    一. RequestDispatche 是一个Web资源的包装器,可以用来把当前的Request传递给该资源,或者把新的资源包括到当前的相应中.详细来说:RequestDispatch对象从客户端获取 ...