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新属性
Nov 11 HTML / CSS
一款纯css3实现的鼠标悬停动画按钮
Dec 29 HTML / CSS
纯CSS3实现鼠标滑过按钮动画第二节
Jul 16 HTML / CSS
css3实现文字首尾衔接跑马灯的示例代码
Oct 16 HTML / CSS
使用html2canvas将页面转成图并使用用canvas2image下载
Apr 04 HTML / CSS
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
Jul 19 HTML / CSS
深入探究HTML5的History API
Jul 09 HTML / CSS
关于HTML5语义标签的实践(blog页面)
Jul 12 HTML / CSS
HTML table 表格边框的实现思路
Oct 12 HTML / CSS
关于iframe跨域使用postMessage的实现
Oct 29 HTML / CSS
详解HTML5常用的语义化标签
Sep 27 HTML / CSS
AmazeUI导航的示例代码
Aug 14 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基础知识:类与对象(4) 范围解析操作符(::)
2006/12/13 PHP
php 表单数据的获取代码
2009/03/10 PHP
YII实现分页的方法
2014/07/09 PHP
PHP获取一年中每个星期的开始和结束日期的方法
2015/02/12 PHP
ThinkPHP框架实现的微信支付接口开发完整示例
2019/04/10 PHP
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
2013/03/06 Javascript
JavaScript中继承用法实例分析
2015/05/16 Javascript
javascript拖拽效果延伸学习
2016/04/04 Javascript
JavaScript中的各种操作符使用总结
2016/05/26 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
2016/12/19 Javascript
Vue中fragment.js使用方法详解
2017/03/09 Javascript
bootstrap手风琴折叠示例代码分享
2017/05/22 Javascript
vue中appear的用法
2017/08/17 Javascript
jQuery基于cookie实现换肤功能实例
2017/10/14 jQuery
node打造微信个人号机器人的方法示例
2018/04/26 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
electron + vue项目实现打印小票功能及实现代码
2018/11/25 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
2019/06/03 Javascript
nodejs一个简单的文件服务器的创建方法
2019/09/13 NodeJs
vue+echarts实现动态折线图的方法与注意
2020/09/01 Javascript
解析Python中的异常处理
2015/04/28 Python
python基础教程项目四之新闻聚合
2018/04/02 Python
python smtplib模块自动收发邮件功能(二)
2018/05/22 Python
python之拟合的实现
2019/07/19 Python
Django 设置多环境配置文件载入问题
2020/02/25 Python
简单了解Java Netty Reactor三种线程模型
2020/04/26 Python
Python3爬虫中Selenium的用法详解
2020/07/10 Python
普天C++笔试题
2016/03/20 面试题
数学系毕业生求职信
2014/05/29 职场文书
十佳青年事迹材料
2014/08/21 职场文书
2014年中学生检讨书大全
2014/10/09 职场文书
电力企业职工培训心得体会
2016/01/11 职场文书
决心书格式及范文
2019/06/24 职场文书
厉害!这是Redis可视化工具最全的横向评测
2021/07/15 Redis
python数据处理之Pandas类型转换
2022/04/28 Python
Python可视化神器pyecharts绘制水球图
2022/07/07 Python