怎样禁止微信内置浏览器的缓存?

最近开发针对微信内置浏览器的网页,发现微信内置浏览器的缓存难以控制,经常反复刷新都没有变化。

按照网上的文章在页面头部加上了如下的内容:

<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />

但是似乎没什么效果。

而且手头的几台手机的行为也不统一,有的手机更新页面比较快,有的手机就怎么刷新都不变。

阅读 128.5k
25 个回答

首先要知道,网页是无法控制浏览器进行缓存的。
如果不想要缓存,唯一的办法就是在url后面添加参数,比如www.123.com/test.html?v=20150316
参数可以用时间戳,很好用,完爆微信缓存

我现在的做法是,发布前对引用到的每个js和css文件名末尾加md5的标记:例如foo.js最后会变成类似foo-3e57d.js,这样只要内容有变化,文件名就相应变化,不存在缓存的问题(当然引用的地方和文件本身都是要改名的)。

当然手工完成这个过程会很繁琐,我现在利用gulp-revgulp-rev-replace将上面的过程完全自动化(参见:https://github.com/jamesknelson/gulp-rev-replace

PS:gulp还有很多很爽的功能,值得掌握~

最简单的方法,也是最有效的方法,在网站后面加个时间戳。如www.baidu.com/?t=13324232121

如果是静态html文件遇到微信缓存而无法及时更新问题,请在html标签中增加不存在的manifest文件链接:

<html manifest="IGNORE.manifest">

根据HTML5 W3C规范,解析器下载manifest header 404/410时,缓存即失效(见 http://www.w3.org/TR/html5/browsers.html#downloading-or-updating-an-application-cache "5.7.4 Downloading or updating an application cache > 5.If fetching the manifest fails due to a 404 or 410")

该方法对其它有自己缓存机制和缓存规则的应用也有奇效。

确认下response header里面的cache行为?

header优先级比meta-tag高

地址带随机数参数,同时页面的头标记声明禁止缓存。另外还需要检查你程序的页缓存,是不是做了页缓存。

新手上路,请多包涵

在别处看到的,在微信里打开这个网址,有清除缓存的功能,还有别的 http://debugx5.qq.com

是微信缓存了html文件,如果是webapp,请在nginx设置

使用手机自带或第三方清楚工具进行清理,可以删除微信数据的缓存。记得不是用微信的缓存清理功能哦。

如果是图片那么在图片地址后面加?abc=123,随机数就可以了,css文件也可以照做,不过,这会使每次页面加载都会重新下载一遍资源,会给客户端产生大量的缓存文件也会使每次页面加载都会很慢。

更新微信版本!

新手上路,请多包涵

q/1/answer

静态的缓存不可怕,添加时间戳就可以解决。
页面的缓存才可怕,微信中点后退不会重新发请求,但页面却会重新渲染,应该是从缓存中加载了,导致一些异步操作的元素状态都恢复如初。这应该怎么解决?

私以为楼上利用给文件名加MD5标记的方式最合适且实用,目前我们开发过程中也是利用这个。以时间戳为参数的形式,之前也有尝试过,微信的缓存严重是出了名的,许多时候给文件名加参数也不太有效,最终还是通过修改文件名达到的目的。所以通过MD5来动态修改文件名是最合适不过的了

url带随机数,这个技术的学名是 Cache Buster

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

最近也在做微信APP,微信使用的是自己的浏览器。为了性能考虑资源都是强制缓存的,你设置什么都不管用(也许我不对哦,求打脸)。

我发现管用的办法是:双击Home键,把微信划掉,重新进来就刷新了。(iOS)

Android应该也一样没试过,大意是重启进程。

首先肯定是时间蹉方案,时间戳方案在很大部分安卓机上是不会有效果的。
然而我们也尝试过localstorge缓存样式的方法,自己写了一套机制来更新样式,然而效率感人,被弃用。
最稳妥的方法,是根据时间或文件MD5重命名。
如果要手动清楚缓存的话,先退出登录,然后关闭微信,再打开登录,这个方法经过了数百产品开发测试的验证,绝对管用。。。
如果是前端调试的话,建议使用livereload,不会有缓存顾虑。

如果调试页面的要求不高的话可以使用qq浏览器,效果基本是一样的。

安卓系统可以在微信设置里清除缓存
iOS直接结束进程即可

新手上路,请多包涵

以上答案都只给出了正对部分问题的缓存解决方案,没有给出完整的套路,要解决css,js,html各种缓存的问题,请看这个文章:
http://blog.tansuyun.cn/index.html#!/art/211

记得回来点赞~

我的项目工程里java的class文件都更新了,不存在页面缓存的问题,但是微信公众号里打开的连接请求结果和没更新之前一样。后来点击公众号里的清空内容,神奇的可以。
jsp中有:
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
但是无效。。。。
连接加时间戳可以解决这个问题?怀疑中

上述问题基于安卓微信环境,IOS端没有出现此问题。

新手上路,请多包涵

要先确定的确是缓存的问题,而不是你的代码的问题。

推荐问题
宣传栏