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

背景：

最近接到一个项目需求，给一套小程序内嵌的H5页面更换主题样式，开发过程虽然比较坎坷但也顺利完成需求开发。 (相关方案连接@努力的Jerry：juejin.cn/post/691482…)javascript

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

解决过程：

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

代码没问题，兼容性没问题，那么只有多是缓存的问题了。java

通常状况，微信小程序的缓存只须要在列表删除小程序从新打开就能清除了，但因为咱们用的是WebView内嵌的H5页面，缓存没有存在小程序中，因此这种办法不能生效。从新登录微信依旧没有效果。最后卸载微信，从新下载---登陆---打开小程序，发现H5页面终于显示正常。喜大普奔！web

固然这种方式只能看成一种应急措施，要想从根本解决问题还得从代码入手。数据库

小程序内核浏览器

据了解小程序

iOS 端：小程序的 javascript 代码是运行在 JavaScriptCore 中，是由 WKWebView 来渲染的，环境有 iOS八、iOS九、iOS10。微信小程序
Android 端：小程序的 javascript 代码是经过 X5 JSCore来解析，是由X5基于 Mobile Chrome 37 内核来渲染的浏览器
开发工具：小程序的 javascript 代码是运行在 nwjs 中，是由 Chrome Webview 来渲染的。缓存

想知道程序运行时使用的是哪一个浏览器，能够访问本地址

www.ip33.com/browser.htm…

如今能够得知，提测过程当中出现样式问题的测试机使用的是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()); 
复制代码

若是你有更好的解决方案，请与我联系，第一次在掘金发表文章还请你们多多指点。

本人博客vastcha.cn/