前文
APP 内嵌 H5 曾经很广泛了,然而每个 app 提供的 webview 体现都不太一样,在开发中遇到了一个十分辣手的缓存问题。APP 启动时加载了咱们商城我的项目的 H5 代码,而后把 index.html 文件缓存到了本地。
记录一下
问题体现
H5 我的项目打包上线后,因为动态资源 js 和 css 文件名前面都带了哈希值,这是 webpack 打包带上的,也是为了 = 避免缓存。然而在 app 启动后因为缓存了 html 申请的还是上个版本包的动态资源,导致 index.a878n.js 找不到 404,页面吧白屏了。—– 咱们 H5 我的项目打包上线后,服务器上上个版本的代码就清掉了。
解决办法
咱们一开始给 html 加上了一段随机数,就是 app 加载到 html 时,在 url 前面加随机数,然而发现 webview 的 html 缓存,导致咱们的 js 批改是更新不上的。
最初解决方案是,app 端加载我的项目时在域名后加工夫戳并降级 app 才可。
为了防止这种问题呈现,那就是我的项目首次上线时就要在 html 内给 url 加上随机数,让 webview 不缓存 html 到本地。
前端大佬给举荐的是一开始就要配置 nginx,强制不缓存 html
location / {
expires -1;
add_header 'Cache-Control' 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
try_files $uri $uri/ @router;
index index.html;
}