微信开发 · 缓存问题

微信缓存导致调整内容不生效。

设置浏览器缓存有下面几种方法：

Last-Modified：服务器上文件的最后修改时间 Etag：文件标识
Expires：本地缓存目录中，文件过期的时间（由服务器指定具体的时间）
Cache-control：本地缓存目录中，文件过期的时间（由服务器指定过期的间隔时间，由于浏览器根据间隔生成具体的时间）

一般情况下，iis会在访问css、js等静态文件时，返回给浏览器Last-Modified和Etag标记，浏览器再次访问服务器的时候会在带上两个标记

If-Modified-Since和If-None-Match，服务器检查参数值，如果文件没有改变则返回304，此时浏览器就访问本地缓存了。如果服务器上该文件被修改过，那么参数值就不一样，服务器就把最后的文件返回给浏览器。

解决方法：

方法一：

Last-Modified是页面的最后生成时间，GMT格式；设置永远是最新的

这个问题首先要搞清楚微信的缓存机制。据我观察，开发中频繁更新html文件，并不会缓存。猜测和服务器返回的Last-Modified有关。并且抓包发现，缓存时，微信没有向服务器请求html文件，改变服务器过期时间并没有用。

touch -m -t 11151101 abcd.html

修改文件的修改时间到一个比较旧的时间点，访问网页立即触发了缓存。
这就比较简单了，Last-Modified永远是最新的不就解决了。
立即动手，改变一下nginx设置，比如我们用Vue框架，入口页/mall/index.html.

location = /mall/index.html {
add_header Last-Modified $date_gmt;
}

方法二：

每次上线后在企业微信后台修改H5url添加时间戳

1、对js、css、html、图片等资源添加时间戳/版本号，例如：

index.js?v=20190507；
index.js?timetamp=(new Date()).getTime()

给请求的路径中加一个随机数。

function OpenURL(){
 var url="index.jsp"+"?a="+Math.random();
 window.open(url);
}

采用的这方案，直接修改了图片的名称，打包编译后上传js文件到服务器，得到的效果是：

• chrome浏览器刷新后得到最新图片；
• android微信和手机浏览器打开链接均已更新；
• 将链接分享给其他同事，打开后图片是最新的；
• ios上的微信上链接刷新后更新，用手机浏览器打开是最新图片；
• 企业微信上出了问题，图片资源依然是之前的
• 有部分用户反馈还是没有更新，但是具体设备不知道

因为服务器设置了cdn缓存，时长为2分钟，所以开始下线后一般的设备，在5分钟以内基本都打不开了，但是企业微信到5分钟以后刷新还能打开页面，后面时间更久了才不能打开。重新上传了页面，之前的问题基本都解决了。

虽然上面的方法可以解决了问题，但是避免不了下次还要进行同样的操作，所以问题的根本原因还是需要找到。

分析上面的过程，即使采用了链接后面加版本号这种方式，由于首页的地址无法修改（已经发布到内部了，不能去修改），所以入口文件被缓存在了企业微信本地，到后面删除文件后，当cdn的缓存失效后页面才被更新，所以根本原因是页面的缓存策略问题。

2、文件名采用hash值得方式（通常采用md5加密）

index-72c58a499f4c.js;

方法三：

H5首页是一个空白中转页面，这个页面的核心代码是加时间戳跳转真正的主页

方法四：

从服务器下手，因为我们使用的oss ，所以在直接给对应资源设置header即可。


也可以在java代码中增加如下代码。
如果是简单的功能测试用的可以直接在serevlet上写，如果是一个完整的项目，可以考虑在过滤器上加。

response.setHeader("Cache-Control","no-cache"); 
response.setHeader("Pragma","no-cache"); 
response.setDateHeader("Expires",0);

配置完这个头部缓存设置，服务器资源更新时才有策略缓存，实现了资源更新，页面更新。

方法五：

在标签里增加如下meta标签。

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">

有致命问题：就是一旦不缓存，将给服务器带来很大压力，用户用起来会比较不流畅

参考：

企业微信，应用缓存问题，有办法去掉缓存吗？
浏览器的缓存机制