關於小程序開發：讓人咬牙切齒的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/