解决webview缓存问题
前言
项目是通过web-view内嵌在小程序里的vue单页应用.然而前几天发现明明发布了代码，在小程序入口进去看到的还是旧页面，尝试了各种操作：
手动退出小程序，再次进入；
删除 发现-小程序，重新进入；
关闭微信，杀掉进程，重新进入
修改 Nginx 关于 Cache-Control 的配置；
用 debugx5.qq.com 手动清除安卓微信浏览器缓存；
iOS 利用微信自带清除缓存功能。
不管怎么操作，依然显示的是旧页面！！！
单页面应用的缓存方向主要是两个（主要也是上图中两种缓存）
- 入口index.html的缓存
- 打包后的资源文件的缓存
之前所了解到的解决缓存的方法
- index.html的head部分添加meta标签
-
< meta http-equiv=“Cache-control” content=“no-store,no-cache” /> < meta http-equiv=“Pragma” content=“no-cache” /> < meta http-equiv=“Expires” content=“0” />
- < webview url=“后面参数带时间戳”></ webview>
这两种方式都试过，都不太行，页面还是有缓存，后面看到一个大佬的文章，感觉好像很可行的样子，就试了一下，果然可以
最终解决方案
先总体说下解决方案
解决入口文件index.html缓存（服务器响应增加请求头Cache-Control，本项目采用Nginx部署，就直接在Nginx配置文件添加了–add_header Cache-Control “no-store, no-cache”
这样每次加载项目地时候都会不走缓存）
解决资源缓存问题（资源加载主要是webpack打包后端 dist文件，这里调整项目配置文件，增加hash:true属性，给每次打包后的文件添加hash标识符）
1.针对url地址没刷新的问题，可以在webview组件的src里面添加一个时间戳.
src = `https://XXX.com?timestamp=${new Date().getTime()}` <web-view src='{{src}}'></web-view>
不要在onload中设置url，在onshow中设置 url
2. 在index.html的head头部添加不缓存的配置
<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" />
nginx 设置不进行缓存
基于nginx静态文件服务器设置如下：
location /hhhh/ {
root /home;
#index index.html index.htm
try_files $uri /h5/index.html;
if ($request_filename ~* .*\.(?:htm|html)$)
{
add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
}
if ($request_filename ~* .*\.(?:js|css)$)
{
expires 7d;
}
if ($request_filename ~* .*\.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm)$)
{
expires 7d;
}
}
location / { expires 1h; root /home/html; index index.html index.htm; ## html不缓存 if ($request_filename ~* .*\.(htm|html)$){ add_header Cache-Control "no-store"; } }
