解决webview缓存问题 以及 nginx 设置不进行缓存

解决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"; } }