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实现王者荣耀匹配人员加载页面的方法
Apr 16 HTML / CSS
详解CSS3弹性伸缩盒
Sep 21 HTML / CSS
Html5 实现微信分享及自定义内容的流程
Aug 20 HTML / CSS
几个解决兼容IE6\7\8不支持html5标签的几个方法
Jan 07 HTML / CSS
程序设计HTML5 Canvas API
Apr 08 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 HTML / CSS
使用jquery实现HTML5响应式导航菜单教程
Apr 02 HTML / CSS
html5录音功能实战示例
Mar 25 HTML / CSS
跨域修改iframe页面内容详解
Oct 31 HTML / CSS
html5默认气泡修改的代码详解
Mar 13 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
Dec 01 HTML / CSS
关于flex 上下文中自动 margin的问题(完整例子)
May 20 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
删除数组元素实用的PHP数组函数
2008/08/18 PHP
php判断输入不超过mysql的varchar字段的长度范围
2011/06/24 PHP
深入浅析yii2-gii自定义模板的方法
2016/04/26 PHP
Laravel框架表单验证操作实例分析
2019/09/30 PHP
js 链式延迟执行DOME
2012/01/04 Javascript
javascript 基础篇2 数据类型,语句,函数
2012/03/14 Javascript
jquery 面包屑导航 具体实现
2013/06/05 Javascript
js简单工厂模式用法实例
2015/06/30 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
2016/08/05 Javascript
jQuery实现的购物车物品数量加减功能代码
2016/11/16 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
2016/12/24 Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
2017/05/27 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
2018/12/29 jQuery
详解微信小程序网络请求接口封装实例
2019/05/02 Javascript
JavaScript:ES2019 的新特性(译)
2019/08/08 Javascript
Webpack中loader打包各种文件的方法实例
2019/09/03 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
2019/11/14 Javascript
vue 清空input标签 中file的值操作
2020/07/21 Javascript
Python 实现简单的电话本功能
2015/08/09 Python
使用python调用zxing库生成二维码图片详解
2017/01/10 Python
Python中应该使用%还是format来格式化字符串
2018/09/25 Python
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
基于matplotlib中ion()和ioff()的使用详解
2020/06/16 Python
Staples英国官方网站:办公用品一站式采购
2017/10/06 全球购物
教师专业自荐书范文
2014/02/10 职场文书
给公司的建议书范文
2014/05/13 职场文书
开展批评与自我批评发言材料
2014/10/17 职场文书
2015年法务工作总结范文
2015/05/23 职场文书
跑吧孩子观后感
2015/06/10 职场文书
暑期工社会实践报告
2015/07/13 职场文书
大学生团支书竞选稿
2015/11/21 职场文书
【超详细】八大排序算法的各项比较以及各自特点
2021/03/31 Python
nginx限制并发连接请求数的方法
2021/04/01 Servers
MySQL数据库如何给表设置约束详解
2022/03/13 MySQL
Javascript webpack动态import
2022/04/19 Javascript