H5：微信分享页面缓存严重的解决方案

问题场景

通过微信分享一个H5页面给用户，分享时页面参数拼接在url中。页面参数不同，页面内容不同。

由于微信自带浏览器会缓存页面，当页面打开次数多了，会发现分享的B参数的页面，打开后仍是之前的A参数页面。

 

在微信开放社区上查找一番，发现有些人也碰到类似问题，故综合网上及实际开发，总结了以下几个方案。

解决方案

1、手动清缓存

android清除缓存方式：打开http://debugx5.qq.com，点击清除缓存。（亲测对该问题无效）

ios退出登录，然后重新登录。（亲测有一定概率效果）

手动清缓存的终极方法是卸载重装。

这种方案对用户很不友好

2、URL拼接时间戳

想着增加一个参数，使多个分享链接区分度更大，亲测无效。

3、代码头部添加

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

亲测无效

4、每次版本更新，路径改变

网上看到博客，有人推荐每次修改，path加上时间，这样页面路径也不同。

比如：https://test.com/202003111053/index.html

目测这样的方案只对版本间有效，对同一版本内的同一页面不同内容无效。且操作起来麻烦，故也未采用。

5、nginx配置rewrite

据我们多次试验和观察，微信对整个H5页面缓存了，而不是其中的图片，css等资源，所以对图片，css加上版本控制可能对该问题无效。

推测微信对H5页面缓存的判断标准之一，就是pathname是否相同。

因此解决思路是改变pathname的同时又能不改变页面的路径。通过在nginx中配置rewrite，可以实现这样的效果。具体操作可以查看之前的博客：

需要注意的是，这里rewrite使用的flag为last。

举个例子：

rewrite ^/static/a.html$ /static/b.html last;

6、nginx设置Cache-Control

通过nginx，我们也可以通过cache-Control来配置缓存策略，可以设为no-store，max-age=0来实现不缓存，每次都请求服务器结果。

风险点：未实测过，可能影响同一项目其他页面的访问效率。可以考虑配置二级域名，单独对分享链接进行不缓存，其他页面保持原配置不动。