app内嵌H5 webview 本地缓存问题的解决


Posted in HTML / CSS onOctober 19, 2020

前文

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 本地缓存内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3 渐变(Gradients)之CSS3 线性渐变
Jul 08 HTML / CSS
CSS3实现类似翻书效果的过渡动画的示例代码
Sep 06 HTML / CSS
CSS3网格的三个新特性详解
Apr 04 HTML / CSS
css3针对移动端卡顿问题的解决(动画性能优化)
Feb 14 HTML / CSS
html5音频_动力节点Java学院整理
Aug 22 HTML / CSS
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
Jan 09 HTML / CSS
详解三种方式实现平滑滚动页面到顶部的功能
Apr 23 HTML / CSS
html5写一个BUI折叠菜单插件的实现方法
Sep 11 HTML / CSS
canvas生成带二维码海报的踩坑记录
Sep 11 HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
Apr 29 HTML / CSS
浅析HTML5 Landmark
Sep 11 HTML / CSS
常用的文件对应的MIME类型汇总
Apr 26 HTML / CSS
使用HTML5做的导航条详细步骤
Oct 19 #HTML / CSS
利用Node实现HTML5离线存储的方法
Oct 16 #HTML / CSS
HTML+CSS+JavaScript实现图片3D展览的示例代码
Oct 12 #HTML / CSS
HTML5逐步分析实现拖放功能的方法
Sep 30 #HTML / CSS
移动端HTML5 input常见问题(小结)
Sep 28 #HTML / CSS
HTML5超文本标记语言的实现方法
Sep 24 #HTML / CSS
Html5 webRTC简单实现视频调用的示例代码
Sep 23 #HTML / CSS
You might like
Terran兵种对照表
2020/03/14 星际争霸
PHP支持多种格式图片上传(支持jpg、png、gif)
2011/11/03 PHP
PHP的时间戳与具体时间转化的简单实现
2016/06/13 PHP
jQuery 判断元素上是否绑定了事件
2009/10/28 Javascript
常用一些Javascript判断函数
2012/08/14 Javascript
jQuery对象初始化的传参方式
2015/02/26 Javascript
JS 对象属性相关(检查属性、枚举属性等)
2015/04/05 Javascript
js如何打印object对象
2015/10/16 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
2015/10/26 Javascript
Bootstrap输入框组件使用详解
2017/06/09 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
2017/07/14 Javascript
seajs下require书写约定实例分析
2018/05/16 Javascript
理理Vue细节(推荐)
2019/04/16 Javascript
vue实现数字动态翻牌的效果(开箱即用)
2019/12/08 Javascript
javascript 函数的暂停和恢复实例详解
2020/04/25 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
2020/10/24 Javascript
python使用PyV8执行javascript代码示例分享
2013/12/04 Python
Python实现的检测网站挂马程序
2014/11/30 Python
Python基于list的append和pop方法实现堆栈与队列功能示例
2017/07/24 Python
python利用正则表达式排除集合中字符的功能示例
2017/10/10 Python
解决python flask中config配置管理的问题
2019/07/26 Python
numpy:np.newaxis 实现将行向量转换成列向量
2019/11/30 Python
YUV转为jpg图像的实现
2019/12/09 Python
新年福利来一波之Python轻松集齐五福(demo)
2020/01/20 Python
如何在pycharm中安装第三方包
2020/10/27 Python
[原创]赚疯了!转手立赚800+?大佬的python「抢茅台脚本」使用教程
2021/01/12 Python
什么是Web Service?
2012/07/25 面试题
无毒社区工作方案
2014/05/23 职场文书
档案工作汇报材料
2014/08/21 职场文书
毕业证代领委托书
2014/09/26 职场文书
2014年街道办事处工作总结
2014/12/11 职场文书
学生犯错保证书
2015/05/09 职场文书
团队执行力培训心得体会
2015/08/15 职场文书
react如何快速设置文件路径别名
2021/04/28 Javascript
MySQL系列之十二 备份与恢复
2021/07/02 MySQL
SQL SERVER触发器详解
2022/02/24 SQL Server