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 相关文章推荐
css背景图片的背景裁切、背景透明度、背景变换等效果运用
Dec 24 HTML / CSS
一款简洁的纯css3代码实现的动画导航
Oct 31 HTML / CSS
CSS3制作漂亮的照片墙的实现代码
Jun 08 HTML / CSS
Grid 宫格常用布局的实现
Jan 10 HTML / CSS
Html5实现如何在两个div元素之间拖放图像
Mar 29 HTML / CSS
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
Apr 24 HTML / CSS
html5 postMessage解决跨域、跨窗口消息传递方案
Dec 20 HTML / CSS
html5自动播放mov格式视频的实例代码
Jan 14 HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
Sep 10 HTML / CSS
Html5移动端div固定到底部实现底部导航条的几种方式
Mar 09 HTML / CSS
几款流行的HTML5 UI框架比较(小结)
Apr 08 HTML / CSS
position:sticky 粘性定位的几种巧妙应用详解
Apr 24 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闭包实例解析
2014/09/08 PHP
详谈PHP编码转换问题
2015/07/28 PHP
PHP实现数据分页显示的简单实例
2016/05/26 PHP
关于php开启错误提示的总结
2019/09/24 PHP
学习YUI.Ext 第七天--关于View&JSONView
2007/03/10 Javascript
javascript数据类型验证方法
2015/12/31 Javascript
javascript 内置对象及常见API详细介绍
2016/11/01 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
2016/12/02 Javascript
js实现前端分页页码管理
2017/01/06 Javascript
jquery实现左右滑动式轮播图
2017/03/02 Javascript
vue+Element-ui实现分页效果实例代码详解
2018/12/10 Javascript
JavaScript Window窗口对象属性和使用方法
2020/01/19 Javascript
Vue中使用better-scroll实现轮播图组件
2020/03/07 Javascript
使用python提取html文件中的特定数据的实现代码
2013/03/24 Python
Python实现的生成自我描述脚本分享(很有意思的程序)
2014/07/18 Python
Python迭代和迭代器详解
2016/11/10 Python
用python简单实现mysql数据同步到ElasticSearch的教程
2018/05/30 Python
python实现一次性封装多条sql语句(begin end)
2020/06/06 Python
全网最全python库selenium自动化使用详细教程
2021/01/12 Python
利用python为PostgreSQL的表自动添加分区
2021/01/18 Python
python matplotlib工具栏源码探析三之添加、删除自定义工具项的案例详解
2021/02/25 Python
J.Crew官网:美国知名休闲服装品牌
2017/05/19 全球购物
澳大利亚相机之家:Camera House
2017/11/30 全球购物
英国玛莎百货美国官网:Marks & Spencer美国
2018/11/06 全球购物
印尼在线旅游门户网站:NusaTrip
2019/11/01 全球购物
JDK安装目录下有哪些内容
2014/08/25 面试题
应聘教师推荐信
2013/10/31 职场文书
食品安全工作方案
2014/05/07 职场文书
党在我心中演讲稿
2014/09/02 职场文书
2014年党风廉政建设工作总结
2014/11/19 职场文书
2014年领班工作总结
2014/11/25 职场文书
2015年乡镇统计工作总结
2015/04/22 职场文书
父亲去世追悼词
2015/06/23 职场文书
小学校园广播稿
2015/08/18 职场文书
青少年法制教育心得体会
2016/01/14 职场文书
Nginx配置https原理及实现过程详解
2021/03/31 Servers