码迷,mamicode.com
首页 > 移动开发 > 详细

HTML5游戏和APP缓存与版本更新

时间:2015-03-05 16:39:58      阅读:1457      评论:0      收藏:0      [点我收藏+]

标签:

概述

浏览器的缓存可以说是一把双刃剑,一方面可以大大加速用户访问的速度,节约带宽;另一方面在版本更新时,缓存又是一个头疼的问题,浏览器有可能使用缓存而非最新发布的资源。资源包括js脚本、CSS、图片资源等。

使用HTML5开发App或者游戏时,理想状态应该是这样的:用户第一次访问,下载和缓存资源;再次访问时,如果服务器版本没有更新,继续使用缓存的资源,不用重新下载;如果服务器版本有更新,则下载更新的资源,然后进入App/游戏。

HTTP的If-Modified-Since Header可以方便的检查文件是否有更新,我们只需要在服务器配置支持If-Modified-Since Header。nginx默认开启,apache需要手动配置一下。没有更新的文件,服务器返回304,但不会传输文件内容,所以请求返回会非常快;有更新的文件,返回200,并传输文件内容。

实际上,对于js脚本、CSS、文本、JSON等文件,可以使用XMLHTTPRequest下载,大部分浏览器会自动进行If-Modified-Since判断,所以这一部分的版本更新和缓存通常是没有问题的;而对于图片资源,XMLHTTPRequest不能加载Cross-domain的图片,而且只能加载Base64格式图片,会使图片尺寸大幅增加。当然,也可以考虑使用XHR2,或者其他XHR的增强,但是兼容性都还不是特别的好。通常情况下我们使用HTML5的Image元素,设置src属性的方式下载图片资源,但会直接使用缓存的资源。

那么问题来了,怎么确保图片资源的缓存和版本更新没有问题呢?(我使用的测试浏览器包括PC端的Chrome/Firefox/Safari,移动端的Safari/Chrome/微信浏览器/QQ浏览器,其余平台未经测试,本文给出方案在其余浏览器仍需测试验证。)

方案1:直接更改图片资源的访问地址

简单粗暴但是十分有效的方法,每次版本更新之后将更新图片的访问地址直接改变。可以在访问地址后加参数,也可以根据文件的MD5值更改文件名,推荐直接改文件名。需要做的工作就是写脚本自动计算MD5值,更改文件名,在js/html等文件里访问地址也需要自动搜索替换,一键发布,搞定。

不足之处:某些js脚本可能有拼接生成文件访问地址的,例如某个特效序列帧,访问地址为"assets/effect_{0}.png".format(index),这种情况替换就会比较麻烦,需要特殊考虑。(此处我修改了String.prototype.format)

方案2. 使用HTML5的ApplicationCache

 ApplicationCache我在之前的博文也有介绍,版本更新时我们只需要对应manifest文件的版本号和CACHE列表即可,浏览器会自动根据manifest文件列表更新文件,始终能保证用户访问到的资源都是最新的。写脚本自动生成manifest文件,一键发布,搞定。

不足之处:如果图片资源很大,我们不希望用户下载所有的图片才进入App/游戏,有很多图片资源可以进入后按需加载。那么这部分按需加载图片就要列入NETWORK列表,或者为了简便直接设置NETWORK: *。问题在于,HTML5规范中NETWORK段是从来不进行缓存的,那么用户再次访问时,按需加载图片资源需要重新下载。所以如果存在按需加载的图片资源,ApplicationCache效果就差很多。

实际测试中,微信浏览器/QQ浏览器对于NETWORK段的资源并没有遵循规范,也进行了缓存,即使用户退出再次访问,按需也会使用缓存的图片,加载速度很快。所以ApplicationCache方案在这两个浏览器就非常适合。Safari/Chrome则不会对NETWORK段资源缓存。

方案3:在服务器配置图片资源的expire时间

第三种思路则是在服务器返回请求时控制图片资源的expire时间,大部分浏览器在文件expire时间到了之后重新从服务器请求下载文件(微信浏览器/QQ浏览器例外,经测试即使expire之后依然会使用缓存图片。。)。我们的App/游戏依然使用浏览器的普通缓存而非ApplicationCache,测试中发现expire后浏览器请求下载文件支持If-Modified-Since,所以只要始终标记图片资源为expired,浏览器就可以自动检查图片是否需要更新。这种方案设置简单,但是非常有效。

比如nginx设置:

location ~* \.(jpg|jpeg|png|ico)$ {
  expires -1;
}

 

不足之处:在Safari/Chrome的效果非常好,但在对于部分缓存机制比较强的浏览器(微信/QQ浏览器等),这种方案不可行。

总结

以上的方案是我在不停的摸索中总结出来的,但概括来说,缓存和版本更新问题,并没有找到一个完美的通用解决方案,浏览器实现和支持HTML5程度千差万别,还是需要根据发布的平台对应选择方案。如果您有更好的方案,欢迎交流和分享!

 

HTML5游戏和APP缓存与版本更新

标签:

原文地址:http://www.cnblogs.com/engineermind/p/4315946.html

(0)
(2)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!