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

解决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=“后面参数带时间戳”>

这两种方式都试过,都不太行,页面还是有缓存,后面看到一个大佬的文章,感觉好像很可行的样子,就试了一下,果然可以

最终解决方案

先总体说下解决方案

解决入口文件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()}`

不要在onload中设置url,在onshow中设置 url

2. 在index.html的head头部添加不缓存的配置

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

相关探索

GGJ2013 砼构件不能重叠布置
365体育投注英超

GGJ2013 砼构件不能重叠布置

一尾到九尾的名字
365bet安卓

一尾到九尾的名字

怎样将照片底色换成蓝色?证件照换底色攻略
365体育投注英超

怎样将照片底色换成蓝色?证件照换底色攻略