一、 问题背景
微信公众号的H5页面,在新版本上线后部分用户无法获取最新的页面文件
二、无法获取新版本页面的用户特征
在上线前某段时间内,访问过该H5页面,手机本地存有该H5页面的缓存
三、解决方案【亲测可行】
-
对于JS和CSS静态文件【取以下两种方案其一即可】
(1)在引用时加上动态版本号,例如<script src="index.js?v=2.5.0" />
(2)动态命名问题,例如利用webpack等打包工具生成HASH文件名<script src="index.12321312.js" />
这样还不能彻底解决缓存问题!!如果当用户获取到的HTML文件都是旧的,那引入的必将是旧的JS!引入的版本号或动态文件名都是旧的!
-
对于HTML文件
很多html链接都是固定的,无法支持动态加版本号等参数,因此需要寻求其他方法来解决Html文件缓存问题~
利用服务端设置response Headers, 强制让HTML文件,每次都向服务器端强制校验文件有效性~cache-control: max-age=0 Last-Modified: Fri,05 Jun 2020 09:52:12 GMT ETag: W/"5e5asdfs-98dc"
这样用户访问H5页面时,每次都会强制验证HTML文件有效性,若文件未发生改变则返回304状态码(取用户本地缓存的HTML文件),否则拉取新的文件内容~
【附】不同手机系统缓存的不同表现
- IOS用户
HTML文件的缓存可通过微信浏览器的右上角强制刷新获取到新的内容!
清除所有文件缓存:退出,重新登录微信~ - 安卓用户
HTML文件的缓存可通过微信浏览器的右上角强制刷新获取到新的内容!
JS和CSS缓存非常顽固,不同机型不同表现,有的机型必须卸载微信才能彻底清除缓存~
退出重新登录微信不起作用!!