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 border-image详解、应用及jQuery插件
Aug 29 HTML / CSS
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
Apr 16 HTML / CSS
简单几步用纯CSS3实现3D翻转效果
Jan 17 HTML / CSS
HTML5 File接口在web页面上使用文件下载
Feb 27 HTML / CSS
HTML5实现锚点时请使用id取代name
Sep 06 HTML / CSS
HTML5语音识别标签写法附图
Nov 18 HTML / CSS
html5小技巧之通过document.head获取head元素
Jun 04 HTML / CSS
HTML5 Canvas 旋转风车绘制
Aug 18 HTML / CSS
使用canvas实现黑客帝国数字雨效果
Jan 02 HTML / CSS
HTML5 图片预加载的示例代码
Mar 25 HTML / CSS
基于CSS3画一个iPhone
Apr 21 HTML / CSS
面试必问:圣杯布局和双飞翼布局的区别
May 13 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中DOMElement操作xml文档实例演示
2013/03/26 PHP
在Nginx上部署ThinkPHP项目教程
2015/02/02 PHP
PHP版单点登陆实现方案的实例
2016/11/17 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
PHP+Redis事务解决高并发下商品超卖问题(推荐)
2020/08/03 PHP
用javascript getComputedStyle获取和设置style的原理
2008/10/10 Javascript
javascript学习之闭包分析
2010/12/02 Javascript
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
JavaScript中length属性的使用方法
2015/06/05 Javascript
javascript 小数乘法结果错误的处理方法
2016/07/28 Javascript
js输入框使用正则表达式校验输入内容的实例
2017/02/12 Javascript
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
React操作真实DOM实现动态吸底部的示例
2017/10/23 Javascript
JavaScript中的E-mail 地址格式验证
2018/03/28 Javascript
jQuery动态操作表单示例【基于table表格】
2018/12/06 jQuery
vue+vant实现商品列表批量倒计时功能
2020/01/13 Javascript
extjs4图表绘制之折线图实现方法分析
2020/03/06 Javascript
[01:04:49]KG vs LGD 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python面向对象编程中关于类和方法的学习笔记
2016/06/30 Python
Python使用pandas处理CSV文件的实例讲解
2018/06/22 Python
Python中使用Counter进行字典创建以及key数量统计的方法
2018/07/06 Python
Python实现堡垒机模式下远程命令执行操作示例
2019/05/09 Python
django 配置阿里云OSS存储media文件的例子
2019/08/20 Python
详解python3中用HTMLTestRunner.py报ImportError: No module named 'StringIO'如何解决
2019/08/27 Python
手把手教你pycharm专业版安装破解教程(linux版)
2019/09/26 Python
python3 中使用urllib问题以及urllib详解
2020/08/03 Python
纯CSS3实现鼠标悬停提示气泡效果
2014/02/28 HTML / CSS
BLACKMORES澳洲官网:澳大利亚排名第一的保健品牌
2018/09/27 全球购物
MyHeritage美国:家族史研究和DNA测试的领先服务
2019/05/27 全球购物
MIKI HOUSE美国官方网上商店:日本领先的婴儿和儿童高级时装品牌
2020/06/21 全球购物
优秀团员个人事迹材料
2014/01/29 职场文书
大学毕业典礼演讲稿
2014/09/09 职场文书
经验交流材料格式
2014/12/30 职场文书
店长岗位职责
2015/02/11 职场文书
爱心募捐通知范文
2015/04/27 职场文书
python使用tkinter实现透明窗体上绘制随机出现的小球(实例代码)
2021/05/17 Python