禁止微信(企业版)内置浏览器缓存

December 6, 2020 ... ☕️ 3 min read

本来浏览器缓存挺简单的,浏览器和服务器端协商一下,用本地或者不缓存都行。但是到了微信里,很多都不好使。

浏览器请求里关于缓存(cache)的属性有三个:Cache-ControlExpiresLast-ModifiedCache-ControlExpires通常会配合Last-Modified使用。现代浏览器里,Cache-Control是高于Expires的,就是说设置了前者,后者会被忽略。

强制缓存和协商缓存

一般情况下,会设置Cache-Control,如果不为0,且在有效时间内,使用强制缓存。如果为0或者失效,启用协商缓存(和服务器协商):把EtagLast-Modified发送给服务器,由服务器判断两个标志是不是最新的。然后返回判断结果。本地浏览器判断使用缓存还是新内容。

返回状态(200和304)

强制缓存(200),浏览器通过判断资源过期信息,直接掌握请求是否发送,不灵活,不能准确判断缓存内容和服务器内容是否完全一致。通常不怎么变的内容,如大部分库的CDN,会用强制缓存,访问更快。

关键header:Expires / Cache-Control,优先级Cache-Control > Expires
Cache-Control设置缓存时间max-age,如果不为0,则会判断并启用强制缓存。

协商缓存(304),需要对比判断是否可以使用缓存。浏览器第一次请求数据时,服务器会将缓存标识(ETag和Last-Modified)与数据一起返回给客户端,客户端把二者都备份至缓存数据库。 当再次请求数据时,客户端把备份的缓存标识发送给服务器,服务器根据缓存标识判断,成功后返回304,通知客户端比较成功,可以使用缓存数据,如果不一致,那么返回新内容和新的缓存标识码。

关键header:Cache-ControlETagLast-Modified
Cache-Control设置max-age为0,启用协商缓存,此时会依旧发送请求,服务器对比EtagLast-modified,来判断浏览器是否能使用本地缓存,是则返回旧的标识,否则返回新内容和标识。

微信浏览器里的情况

静态文件(js/css)由于webpack打包添加了版本号,所以不会有缓存问题。后端接口请求,由于参数不同,设置了Cache-Control,请求也不会有缓存。

但是微信蛋疼的地方在于,入口文件给缓存了!还是重试无效的那种。

尝试的方法:html请求地址添加hash(无效);变更请求文件名,如时间戳(每次替换太麻烦了)。

折腾了一上午,最后发现Cache-Control无效,但是Expires有效,设置Expires: -1,再打开就发现不缓存了。

#network

SideEffect is a blog for front-end web development.
Code by Axiu / rss