问题描述

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

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

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

原因

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

解决办法

解决方案一：手动清理缓存（十分不友好）

（1）android内置浏览器缓存清除

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

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

（2）iOS内置浏览器缓存清除

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

解决方案二：自动清理缓存

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

（1）发布时候版本号控制

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

（2）前端运行环境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";
}