Blogger Information
Blog 15
fans 0
comment 0
visits 20739
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
微信h5缓存
李子的博客
Original
3818 people have browsed it

微信浏览器的奇葩,在ios和安卓版本的产品,浏览器内核都不一样;而不同系统的不同微信版本的表现也不统一。清理缓存的方式也就各种不一样:

1,android:debugx5.qq.com,这是微信x5内核浏览器的debug调试页面,在微信浏览器打开,拉到页面最底部,有清理缓存的选项。
然而并不是所有安卓手机都能打开这个链接,比如我们遇到的zuk手机就不能打开,这也让我无能为力;可以尝试ios的方式清除。

微信x5内核浏览器debug页面

2,ios:
                a.  取关公众号,重新关注;
                b.  退出微信账号登陆,重新登陆微信;
                c.  微信设置-通用-存储-清理缓存;
                d.  进入页面,右上角‘...’选项中点击“刷新”;
这四种方式,在各种版本各种iphone以及各种微信版本中,都不保证能生效;有的用单一一种方式就能清除,有的需要组合方式,反正你就各种尝试组合上述方式吧,就能清除缓存了。

自动清理缓存

手动清理缓存是可以达到目的,但我们不可能让用户每次都进行这样的操作,更何况我们的行业属性决定了我们有大量的手机都不太会用的客户,让他们进行这样的操作无疑非常不友好。所以根本的解决方式是,不让微信缓存我们的资源。下面我将悉数列出在这段时间里尝试过的所有方法,同时说明有效性,给大家一个参考。

1,设置meta标签  (无效)

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

这是第一个想到的方式,设置页面的meta标签,来告诉浏览器不要缓存当前页面,相当于http请求的请求头设置。因为当时大量用户不能访问,或者加载出错,我们想用最快的方式解决问题。然而事实证明,这个meta标签太小儿科了,也就在正常的浏览器有用,对于微信这样的奇葩,挠痒都闲力小。

2,版本号  (有效)

因为我们项目结构的复杂性,以及我们框架的特殊性,给静态资源加版本号这个本来不算太难的问题,在我们这变得异常艰难。所以虽然意识到这个是迟早要解决的问题,也就一直放着没动。
这个时候查阅了大量的资料,开始意识到微信浏览器的缓存简直是非版本控制不能解决的了。于是硬着头皮开始弄,各种痛苦不表,总之算是完成了缓存问题的80%。
版本号有两种方式:
        a,传统的文件名后带参数的方式: index.js?v=20170705;
        b,现在多用的md5文件名的方式: index-8a769sh7f9d.js;
查阅权衡之后,决定选择后一种方式。最终也证明这个决定的正确,因为微信对于第一种方式,可能会直接忽略后面的hash值……

3,入口文件被缓存

历尽艰辛对所有的静态js/css等文件添加版本号后,以为终于是解决了缓存的问题,没想到微信又给我来了一记重击----入口文件index.html被缓存了!我们项目算是单页应用,入口文件是没有什么内容的,只是作为入口引入逻辑相关的index.js,然后js来控制页面内容的加载。当我们的index.js文件加了版本号后,实际变成了index-<md5>.js,这时候index.html被缓存了,那么页面中引入的还是index.js,这时候已经不存在index.js了,所以变成了404,主逻辑无法加载,网站就几乎***了。

为了解决入口html被缓存的问题,我们尝试了几种方式:

a,直接修改公众号菜单的链接地址,在html后面加上?v=20170705这样的hash值;(无效)

b,用gulp给入口文件生成带上述hash值的index文件,重复a步骤,无效;
c,给index.html的跟标签html加上一个不存在的manifest文件;具体参考 W3C manifest相关说明;如下图:

w3c对于manifest文件不存在的情形下浏览器应该遵循的处理步骤说明

w3c的表述很明确,第一句就说了,如果manifest文件不存在,浏览器对此页面的缓存将会失效。然而你以为对微信浏览器有用?naive。我亲测没有效果,但是有网友说有效。所以大家不妨一试,也许你恰好可以呢?毕竟,你面对的是微信浏览器这朵奇葩。
d,把入口文件放到后端来渲染返回,让后端对返回的index.html做版本操作或者hash处理等等方式;这个方式只是想了想,但是因为改变了我们的加载方式,预估影响不小,所以放弃了;有兴趣的同学可以尝试。
e,变更入口文件的名称,比如index1.html,下次更新就变成idnex2.html……;这个肯定是可行的,但是太奇葩,每次都要修改文件名,微信后台url配置也要更改。当时是实在没办法,真是各种想法都来了。

真的是想尽办法,但是结果还是不如人意。拿来同层公司的项目过来看,发现他们的入口文件也是没有做版本号的,也没有hash值,但是为什么人家的就没有这个问题呢?
然后,在网上瞄到一句,说是他的同一个代码,部署到阿里云和新浪服务器的缓存表现并不一样。让我开始把目光从前端本身转移到了服务端:会不会是服务端配置有问题呢?nginx代理的这一层会不会是问题所在呢?

F:设置nginx的缓存机制;直接将nginx的缓存设置成{expires-1;},设置成永远不缓存;如果没有nginx,其他apache什么的通用这个方法。

到这里,缓存问题总算解决了!此刻知乎这句话才能表达我的心情:


总之,微信的浏览器缓存之顽固,前所未见。给静态资源添加md5类型的版本号是根本办法;入口文件被缓存,首页是设置服务端的缓存机制,然后再结合我上述的某些方法,就应该能解决问题了。



作者:jacques_迹远
链接:https://www.jianshu.com/p/cce9511c0914
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。


Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post