用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

关于小程序开发:让人咬牙切齿的WebView缓存问题

Rolan 2021-1-15 17:51

最近接到一个项目需求,给一套小程序内嵌的H5页面更换主题样式,开发过程虽然比较坎坷但也顺利完成需求开发。

背景:


最近接到一个项目需求,给一套小程序内嵌的H5页面更换主题样式,开发过程虽然比较坎坷但也顺利完成需求开发。

但是,相关质量工程师在提测时发现,有一部分H5的css样式没有发生变化,显示的仍是原始的样式。仔细检查代 码发现并无问题。经过一段时间的排查,发现大多数测试机样式显示正常 ,只有个别安卓手机出现异常。


解决过程:

在出现问题的测试机上,大部分H5页面样式没有问题,只有少数页面未能更新css样式,并且所有的H5页面html显示正常。由此可以排除手机的兼容性问题。

代码没问题,兼容性没问题,那么只有可能是缓存的问题了。

一般情况,微信小程序的缓存只需要在列表删除小程序重新打开就能清除了,但由于我们用的是WebView内嵌的H5页面,缓存没有存在小程序中,所以这种办法不能生效。重新登陆微信依旧没有效果。最后卸载微信,重新下载---登录---打开小程序,发现H5页面终于显示正常。喜大普奔!

当然这种方式只能当作一种应急措施,要想从根本解决问题还得从代码入手。


小程序内核浏览器

据了解

  • iOS 端:小程序的 javascript 代码是运行在 JavaScriptCore 中,是由 WKWebView 来渲染的,环境有 iOS8、iOS9、iOS10。

  • Android 端:小程序的 javascript 代码是通过 X5 JSCore来解析,是由X5基于 Mobile Chrome 37 内核来渲染的

  • 开发工具: 小程序的 javascript 代码是运行在 nwjs 中,是由 Chrome Webview 来渲染的。

现在可以得知,提测过程中出现样式问题的测试机使用的是X5内核浏览器,X5对Html5与ES6完全支持,所以不用担心会出现兼容性的问题。那么现在的问题就是如何清除缓存或者避免产生缓存


HTTP缓存机制

首先要大致地了解一下http的缓存机制,Web 缓存大致可以分为:数据库缓存、服务器端缓存(代理服务器缓存、CDN 缓存)、浏览器缓存。 浏览器缓存也包含很多内容: HTTP 缓存、indexDB、cookie、localstorage 等等。这里我们只讨论 HTTP 缓存相关内容。

如图红线所示的过程代表强缓存。用户发起了一个http请求后,浏览器发现先本地已有所请求资源的缓存,便开始检查缓存是否过期。 每个浏览器的缓存周期不同,要等缓存过期还不知道得等多久。逛了逛微信开放社区,官方对清除webview缓存好像还没有真正有效的解决方案,只能通过本地手段强制清除缓存(重新安装微信或者重新登陆,后者不一定有用),体验较差。


避免产生缓存

现在最好的办法还是去避免产生缓存,浏览器缓存是基于url进行缓存的,如果页面允许缓存,则在一定时间内(缓存时效时间前)再次访问相同的URL,浏览器就不会再次发送请求到服务器端,而是直接从缓存中获取指定资源。如果我们每次访问不同的url,那么也就不会产生缓存。

为了让webview跳转到不同的url,我们只需要在URL后面添加一些特殊字段实现差异化,这些字段可以是小程序的版本号也可以是一段时间戳。

获取时间戳的方式

const timeStamp =Date.parse(new Date()); 
复制代码

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏