微信公众号H5页面缓存问题解决方案！

一、 问题背景

微信公众号的H5页面，在新版本上线后部分用户无法获取最新的页面文件

二、无法获取新版本页面的用户特征

在上线前某段时间内，访问过该H5页面，手机本地存有该H5页面的缓存

三、解决方案【亲测可行】

1. 对于JS和CSS静态文件【取以下两种方案其一即可】
   （1）在引用时加上动态版本号，例如<script src="index.js?v=2.5.0" />
   （2）动态命名问题，例如利用webpack等打包工具生成HASH文件名<script src="index.12321312.js" />

   这样还不能彻底解决缓存问题！！如果当用户获取到的HTML文件都是旧的，那引入的必将是旧的JS！引入的版本号或动态文件名都是旧的！

2. 对于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文件），否则拉取新的文件内容~

【附】不同手机系统缓存的不同表现

1. IOS用户
   HTML文件的缓存可通过微信浏览器的右上角强制刷新获取到新的内容！
   清除所有文件缓存：退出，重新登录微信~
2. 安卓用户
   HTML文件的缓存可通过微信浏览器的右上角强制刷新获取到新的内容！
   JS和CSS缓存非常顽固，不同机型不同表现，有的机型必须卸载微信才能彻底清除缓存~
   退出重新登录微信不起作用！！