html5如何及时更新缓存文件(js、css或图片)

我们在使用offline cache的时候，有时候可能会更新资源，如js，css或者图片的 更新。但是在没有更新以前用户已经缓存了旧版本的资源，当在次访问的时候 他使用的还是旧版本的资源，如何才能让用户及时的更新缓存资源呢？ 

更新缓存资源主要有两种方法，通过修改配置文件的版本号或者调用js完成更新 （脚本之家 ）
js更新方法 

复制代码

代码如下:

if (window.applicationCache.status == window.applicationCache.UPDATEREADY) { 
window.applicationCache.update(); }

修改文件 

更新manifest文件 
浏览器发现manifest文件本身发生变化，便会根据新的manifest文件去获取新的资源进行缓存。 
当manifest文件列表并没有变化的时候，我们通常通过修改manifest注释的方式来改变文件，从而实现更新。 
注释改变就是指配置文件的版本号

摘自（http://www.ttwshell.com/article/HTML5-CSS-JS-Tips-Disable-Cache.html）

Meta法

目前在chrome调试还没有遇到问题，好用！此方法假设浏览器是个好人！很听我们的话！

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">

 

如果不明白，可以看我的另一篇文章HTML5 meta标签的总结。

随机数法 Cache Buster

随机数法本身相当于渲染模板时添加版本号，在某些版本的浏览器，此法无效。此方法假设浏览器是个小坏蛋！他有可能调皮，不听我们的话！

<script>
    var js = document.createElement("script");
    js.src = "test.js?random" + Math.random();
    document.body.appendChild(js);
</script>