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实现图片无间断轮播效果
Aug 25 HTML / CSS
CSS3 透明色 RGBA使用介绍
Aug 06 HTML / CSS
html5应用缓存_动力节点Java学院整理
Jul 13 HTML / CSS
HTML5 语义化结构化规范化
Oct 17 HTML / CSS
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
Apr 22 HTML / CSS
HTML5图片预览实例分享
Jun 04 HTML / CSS
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
Nov 05 HTML / CSS
HTML5几个设计和修改的页面范例分享
Sep 29 HTML / CSS
HTML5添加禁止缩放功能
Nov 03 HTML / CSS
canvas 如何绘制线段的实现方法
Jul 12 HTML / CSS
关于html字符串正则判断和匹配的具体使用
Dec 12 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
Aug 06 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
图象函数中的中文显示
2006/10/09 PHP
html中select语句读取mysql表中内容
2006/10/09 PHP
php下目前为目最全的CURL中文说明
2010/08/01 PHP
php模块memcache和memcached区别分析
2011/06/14 PHP
codeigniter数据库操作函数汇总
2014/06/12 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
imagettftext() 失效,不起作用
2021/03/09 PHP
Javascript this指针
2009/07/30 Javascript
js实现类似菜单风格的TAB选项卡效果代码
2015/08/28 Javascript
js验证框架之RealyEasy验证详解
2016/06/08 Javascript
vue做网页开场视频的实例代码
2017/10/20 Javascript
JS中call和apply函数用法实例分析
2018/06/20 Javascript
详解使用Next.js构建服务端渲染应用
2018/07/10 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
2019/02/21 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
Vue 的双向绑定原理与用法揭秘
2020/05/06 Javascript
Python解析json之ValueError: Expecting property name enclosed in double quotes: line 1 column 2(char 1)
2017/07/06 Python
Python排序搜索基本算法之插入排序实例分析
2017/12/11 Python
Python Unittest根据不同测试环境跳过用例的方法
2018/12/16 Python
Mac PyCharm中的.gitignore 安装设置教程
2020/04/16 Python
python 生成器需注意的小问题
2020/09/29 Python
matplotlib制作雷达图报错ValueError的实现
2021/01/05 Python
Jupyter Notebook 远程访问配置详解
2021/01/11 Python
瑞贝卡·泰勒官方网站:Rebecca Taylor
2016/09/24 全球购物
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
如何提高MySql的安全性
2014/06/19 面试题
当文件系统受到破坏时,如何检查和修复系统?
2012/03/09 面试题
Servlet如何得到服务器的信息
2015/12/22 面试题
高中历史教学反思
2014/02/08 职场文书
高中生的自我评价
2014/03/04 职场文书
房屋公证委托书
2014/04/03 职场文书
会计学专业求职信
2014/07/17 职场文书
清洁工岗位职责
2015/02/13 职场文书
生产车间主任岗位职责
2015/04/08 职场文书
2015学校图书管理员工作总结
2015/05/11 职场文书
QT连接MYSQL数据库的详细步骤
2021/07/07 MySQL