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

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

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

<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" />

但是似乎没什么效果。

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

阅读 107.8k
评论
    26 个回答

    首先要知道,网页是无法控制浏览器进行缓存的。
    如果不想要缓存,唯一的办法就是在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还有很多很爽的功能,值得掌握~

        • 117

        最简单的方法,也是最有效的方法,在网站后面加个时间戳。如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")

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

            • 11.8k

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

            header优先级比meta-tag高

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

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

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

                      • 1.3k

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

                        • 1.4k

                        更新微信版本!

                          • 0
                          • 新人请关照

                          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浏览器,效果基本是一样的。

                                            • 0
                                            • 新人请关照

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

                                              • 0
                                              • 新人请关照

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

                                              记得回来点赞~

                                                • 1
                                                • 新人请关照

                                                我的项目工程里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端没有出现此问题。

                                                  • 2
                                                  • 新人请关照

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

                                                    • 1
                                                    • 新人请关照

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

                                                      • 1
                                                      • 新人请关照

                                                      如果用webpack开发每次都生成不同的JS文件和CSS文件。
                                                      或者你在你的JS和CSS后面加上随机生成不用的版本。跟第一条的方案类似

                                                      该答案已被忽略,原因:

                                                        撰写回答

                                                        登录后参与交流、获取后续更新提醒

                                                        微信开放生态 相关的技术问题交流平台