app内嵌H5 webview 本地缓存问题的解决
更新时间：2020年12月8日 11:32 点击：2147
前文
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;
}
到此这篇关于app内嵌H5 webview 本地缓存问题的解决的文章就介绍到这了,更多相关app内嵌Html5 webview 本地缓存内容请搜索猪先飞以前的文章或继续浏览下面的相关文章，希望大家以后多多支持猪先飞！
相关文章
- 这篇文章主要介绍了HTML5+ API plusready的兼容问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-12-08
- 这篇文章主要介绍了H5 video poster属性设置视频封面的方法的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2020-06-30
- 这篇文章主要介绍了关于webview适配H5上传照片或者视频文件的方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-12-08
- 这篇文章主要介绍了app内嵌H5 webview 本地缓存问题的解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-12-08
- 这篇文章主要介绍了HTML5页面无缝闪开方案,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-06-30
- 这篇文章主要介绍了给萌新的HTML5 入门指南，帮助萌新更好的理解和学习html5的相关知识，感兴趣的朋友可以了解下...2020-12-08
- 这篇文章主要介绍了html5拖拽应用记录,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-06-30
- 这篇文章主要介绍了利用Node实现HTML5离线存储的方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-12-08
- 这篇文章主要介绍了萌新如何入门html5，帮助大家更好的理解和制作网页，感兴趣的朋友可以了解下...2020-12-08
- 越来越多的站点开始使用 HTML5 标签，但是目前的情况是还有很多人在使用IE6、IE7、IE8。为了让所有浏览者都可以正常的访问，解决方案有下面两个...2020-06-30
- 这篇文章主要介绍了使用Html5 Stream开发实时监控系统，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-06-30