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打造百度贴吧的3D翻牌效果示例
Jan 04 HTML / CSS
CSS3 @media的基本用法总结
Sep 10 HTML / CSS
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
Apr 10 HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
Nov 20 HTML / CSS
HTML5拖放功能_动力节点Java学院整理
Jul 13 HTML / CSS
HTML5之SVG 2D入门4—笔画与填充
Jan 30 HTML / CSS
html5中 media(播放器)的api使用指南
Dec 26 HTML / CSS
举例详解HTML5中使用JSON格式提交表单
Jun 16 HTML / CSS
分享29个基于Bootstrap的HTML5响应式网页设计模板
Nov 19 HTML / CSS
HTML5本地存储和本地数据库实例详解
Sep 05 HTML / CSS
css 中多种边框的实现小窍门
Apr 07 HTML / CSS
浅谈为什么我的 z-index 又不生效了
Jul 15 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 编写的 25个游戏脚本
2009/05/11 PHP
关于PHP的相似度计算函数:levenshtein的使用介绍
2013/04/15 PHP
sql注入与转义的php函数代码
2013/06/17 PHP
php语言中使用json的技巧及json的实现代码详解
2015/10/27 PHP
PHP上传Excel文件导入数据到MySQL数据库示例
2016/10/25 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
2012/05/23 Javascript
jQuery中slideUp 和 slideDown 的点击事件
2015/02/26 Javascript
浅谈javascript中replace()方法
2015/11/10 Javascript
Bootstrap每天必学之导航
2015/11/26 Javascript
JS中多步骤多分步的StepJump组件实例详解
2016/04/01 Javascript
js中class的点击事件没有效果的解决方法
2016/10/13 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
2017/03/29 Javascript
three.js实现3D视野缩放效果
2017/11/16 Javascript
js限制输入框只能输入数字(onkeyup触发)
2018/09/28 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
2019/05/23 Javascript
ES6 Generator函数的应用实例分析
2019/06/26 Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
2019/10/31 Javascript
浅析vue中的nextTick
2020/12/28 Vue.js
Flask Web开发入门之文件上传(八)
2018/08/17 Python
Python OpenCV图像指定区域裁剪的实现
2019/10/30 Python
python dataframe NaN处理方式
2019/12/26 Python
python通用读取vcf文件的类(复制粘贴即可用)
2020/02/29 Python
python 基于selectors库实现文件上传与下载
2020/12/31 Python
超酷炫 CSS3垂直手风琴菜单
2016/06/28 HTML / CSS
html5如何及时更新缓存文件(js、css或图片)
2013/06/24 HTML / CSS
Lee牛仔裤澳大利亚官网:美国著名牛仔裤品牌
2017/09/02 全球购物
俄罗斯有趣和原创礼物网上商店:MagicMag
2019/08/01 全球购物
我能否用void** 指针作为参数, 使函数按引用接受一般指针
2013/02/16 面试题
建筑项目策划书
2014/01/13 职场文书
大学生职业规划书的范本
2014/02/18 职场文书
销售活动策划方案
2014/08/26 职场文书
2014小学数学教师个人工作总结
2014/12/18 职场文书
英文辞职信范文
2015/05/13 职场文书
黑白记忆观后感
2015/06/18 职场文书
你知道哪几种MYSQL的连接查询
2021/06/03 MySQL