问题描述

企业微信里面自建了一个应用,通过H5页面链接跳转,但是后台应用更新后,点进去还是旧的页面,需要清除缓存才能生效。

由于之前无论是公众号还是微信分享链接,都是经过充分测试后发布上线的,上线后即使更改了,也能在较快的时间内更新。所以对微信这块一直模棱两可的状态,没有从根本上解决这个缓存的问题。但是这次的需求不同,产品由于某个图片上的文字修改(仅仅一个数字的修改),等ui把图片发过来,然后上传到服务器上后,还是跟之前一样,也期待着资源会自动更新。

开发过程中,多数人可能遇到过打包编译完的文件上传到服务器之后,立即访问会发现存在缓存,有的时候部分设备刷新页面或者清除微信以及QQ浏览器缓存会解决这种现象,这对于项目运行有一定的影响,所以总要找出解决办法。

原因

微信x5内核浏览器webview上层缓存机制,访问过的页面,静态资源都会被缓存,待下次访问,所有资源是从缓存中拉取的,而不是实时更新的。

解决办法

1.手动清理缓存(十分不友好)

(1)android内置浏览器缓存清除
android版微信内置浏览器(X5内核),在安卓版微信内打开链接 http://debugx5.qq.com/ 或者 http://debugtbs.qq.com/​​​​​​​ 拉到调试页面的最底端,勾选上所有的缓存项目,点击清除。

另外这里有一个小的调试工具技巧,设置里面的信息,勾选相关条件,如勾选上console工具即可在页面上出现console的工具。

(2)iOS内置浏览器缓存清除
ios版微信内置浏览器(WKWebView), ios版微信内置浏览器内核并不是 X5内核,而是使用的ios的浏览器内核WKWebView,所以安卓手机的那种方案对ios手机用户不生效,因为那个链接压根打不开,只要微信用户退出登录,然后重新登录,ios版微信内置浏览器内核即可清除。

2.自动清理缓存

手动清除缓存虽然可能能够达到更新的目的,但是对于用户十分不友好,总不能每次更新都让客户去刷新页面,这对于ToB/ToC的项目是要命的,要想从根本上解决问题,还是要浏览器不缓存资源的方法最为妥当。

①发布时候版本号控制
对项目中的静态资源文件名称添加版本号,如:文件名带参数【index.js?v=b8c42adff1b74f6e】或者采用md5文件名【index-b8c42adff1b74f6e.js】两种方式,经过测试均有效果,但是文件名带参数的方式可能会被微信忽略掉hash值。

②前端运行环境nginx配置

1
2
3
4
5
6
7
8
location ~ .*\.(?:htm|html)$ {
# 由于服务器部署多套项目环境,所以配置具体的项目目录。
root jimei-admin
# 缓存设置 -1为永不缓存
expires -1;
# 添加返回头字段,设置HTTP请求头
add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
}