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 相关文章推荐
浅析两列自适应布局的3种思路
May 03 HTML / CSS
HTML+CSS3 模仿Windows7 桌面效果
Jun 17 HTML / CSS
css3 border-image使用说明
Jun 23 HTML / CSS
CSS3属性box-shadow使用详细教程
Jan 21 HTML / CSS
css3 media 响应式布局的简单实例
Aug 03 HTML / CSS
CSS3实现可翻转的hover效果
May 23 HTML / CSS
HTML5探秘:用requestAnimationFrame优化Web动画
Jun 03 HTML / CSS
HTML5移动端开发遇见的东西
Oct 11 HTML / CSS
HTML5 Canvas——用路径描画线条实例介绍
Jun 09 HTML / CSS
html5小技巧之通过document.head获取head元素
Jun 04 HTML / CSS
详解Canvas 跨域脱坑实践
Nov 07 HTML / CSS
html form表单基础入门案例讲解
Jul 21 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
PHPEXCEL 使用小记
2013/01/06 PHP
解析php二分法查找数组是否包含某一元素
2013/05/23 PHP
php简单的留言板与回复功能具体实现
2014/02/19 PHP
php获取字符串中各个字符出现次数的方法
2015/02/23 PHP
一个简单安全的PHP验证码类 附调用方法
2016/06/24 PHP
MSN消息提示类
2006/09/05 Javascript
js中一个函数获取另一个函数返回值问题探讨
2013/11/21 Javascript
浅谈Javascript的静态属性和原型属性
2015/05/07 Javascript
javascript作用域问题实例分析
2015/07/13 Javascript
关于js二维数组和多维数组的定义声明(详解)
2016/10/02 Javascript
JavaScript之cookie技术详解
2016/11/18 Javascript
解析JavaScript数组方法reduce
2016/12/12 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
2017/01/09 Javascript
jQuery实现的简单拖动层示例
2017/02/22 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
2017/03/27 Javascript
利用node.js本地搭建HTTP服务器
2017/04/19 Javascript
浅谈angular2 组件的生命周期钩子
2017/08/12 Javascript
详解nodeJs文件系统(fs)与流(stream)
2018/01/24 NodeJs
jquery实现自定义树形表格的方法【自定义树形结构table】
2019/07/12 jQuery
JavaScript HTML DOM元素 节点操作汇总
2019/07/29 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
2020/03/31 Javascript
在nuxt中使用路由重定向的实例
2020/11/06 Javascript
[00:48]食人魔魔法师至宝“金鹏之幸”全新模型和自定义特效展示
2019/12/19 DOTA
在Python的Django框架中编写编译函数
2015/07/20 Python
Python正则表达式知识汇总
2017/09/22 Python
对python中的logger模块全面讲解
2018/04/28 Python
python3射线法判断点是否在多边形内
2019/06/28 Python
python机器学习实现决策树
2019/11/11 Python
Tensorflow不支持AVX2指令集的解决方法
2020/02/03 Python
Python获取对象属性的几种方式小结
2020/03/12 Python
Python 在局部变量域中执行代码
2020/08/07 Python
英国钻石公司:British Diamond Company
2020/02/16 全球购物
大学生活学习的自我评价
2013/12/03 职场文书
DIY蛋糕店的创业计划书范文
2013/12/26 职场文书
《雪地里的小画家》教学反思
2014/02/22 职场文书
同意落户证明
2015/06/19 职场文书