劉望舒 - 貨拉拉 Android H5離線包原理與實踐！－鑽石舞台

安卓進階漲薪訓練營，讓一部分人先進大廠

大家好，我是皇叔，最近開了一個安卓進階漲薪訓練營，可以幫助大家突破技術&職場瓶頸，從而度過難關，進入心儀的公司。

詳情見文章：沒錯！皇叔開了個訓練營

背景

在實際業務中，app中的H5頁面使用的場景越來越多，在貨拉拉app中也存在大量的H5頁面，比如金秋拉貨節、餘額、車型介紹頁等，加載速度成為了困擾用戶的一個痛點。為此我們決定引入離線包方案，另外還需要解決傳統離線包方案不靈活，體積大，不易管理，不易降級等問題，我們設計和開發一套H5離線包系統，經過幾個sdk版本的迭代，目前貨拉拉H5離線包sdk，已在多個業務中落地，接受了大量用戶檢驗。車型介紹頁面使用離線包前後打開效果：

行業方案

目前H5離線包方案，通常是將離線包置入assets目錄中，打包在apk內部，用戶使用過程中再按需加載。所以大部分情況下可能存在以下問題：

由於離線包內容固定導致更新不及時

當離線包內容較多或者離線包個數較多時，會嚴重影響App包體積

由於離線包內部的邏輯固定，當出現問題時無法降級，無法禁用

上線沒有數據對比無法知道上線效果

針對以上痛點，我們團隊對離線包進行設計優化，應用於團隊內的多個應用，多個業務場景中。

技術實現

H5離線包的基本原理是將html、js、css、圖片等靜態資源打包到成壓縮文件，然後下載到客戶端，H5加載時靜態資源直接從本地取文件，減少網絡請求，提高速度。加載本地文件路徑存在的問題和解決：

存在問題解決方法cgi請求跨域跨域請求頭增加null支持cookie跨域問題目前靜態js中無cookie操作，沒有cookie跨域問題localstorage跨域問題暫時不涉及域名隔離問題，如果有需要，採取調用原生的方式解決前端使用絕對路徑問題相對路徑

4.1 總體結構

H5發布基本流程

image.png

App端流程圖

image.png

前端的打包平台，支持發布為線上頁面，也支持發布為離線包。離線包模式時，客戶端會先查詢是否有離線包需要更新，有則更新，同時支持離線包降級為線上網頁。

H5離線包和線上H5一樣也能進行更新和升級，有三個更新時機：

1）WebView容器打開時更新。在需要開啟離線包功能的H5頁面打開時，會去後端檢查對應的離線包頁面是否有更新。如果有更新，則下載離線包到本地，絕大部分場景是下次打開時生效。

2）啟動查詢離線包更新。對於實時性要求比較高的頁面，可配置在啟動時檢查更新。

3）通過長連接推送的方式通知客戶端下載最新的離線包。（需要接入方自己實現長鏈接，調用SDK更新方法）

4.2 性能優化

1）多業務並行化，單業務串行

離線包檢查更新時，存在同時查詢多個業務的離線包是否有更新的情況，為了提高查詢效率，多個業務離線包檢查的請求採取並行請求的方式。考慮到後端改造成本問題，目前還不支持聚合查詢，計劃在後續版本中完善。另外，考慮業務流程的更新流程取消可能導致不穩定，單業務只做串行，避免過程中文件損壞，下載不全，線程並發的問題。

image.png

2）啟動預下載

大部分離線包查詢和下載的時機為打開H5頁面時，由於離線包查詢、下載、解壓總體耗時較長，導致首次打開無法命中離線包。所以貨拉拉離線包支持配置部分離線包在啟動時檢查和下載離線包。配置為：

OfflineConfigofflineConfig=newOfflineConfig.Builder(true).addPreDownload("offline-pkg-name")//預加載業務名稱.build();,4.3 可靠性設計

1）解壓操作可靠性設計

文件解壓耗時較長（大約30ms），如果中間程序退出可能會導致只解壓了其中一半文件，影響後續離線包邏輯。所以解壓到文件夾操作採取先解壓，然後重命名，保證最後的文件夾的里的文件是完整的。同時當離線包正在使用時，一般情況下採取先解壓，下次生效的策略，極端情況下可以立刻生效，但會導致頁面強刷，影響用戶體驗。操作過程採取了temp、new、cur三個文件夾，解壓細節如下

image.png

2）三重降級策略

a.客戶端自動降級。

本地沒有離線包時，客戶端會自動將啟用了離線包的H5頁面降級為線上H5頁面。

b.客戶端遠程配置降級。

可以設置局部降級，即臨時將某個使用離線包的H5頁面降級為線上，也可設置全局降級，關閉所有頁面的離線包功能。接入方可以自行根據自己服務端下發參數進行配置：

OfflineConfigofflineConfig=newOfflineConfig.Builder(true)//總開關.addDisable("disable-offline-pkg-name")//禁用業務名稱.addPreDownload("offline-pkg-name")//預加載業務名稱.build();

c.服務端接口降級。

服務端提供的離線包查詢接口也可以設置將某個頁面降級為線上H5，也可以支持讓客戶端更新離線包後強制刷新。目前，強制刷新為空實現，需要接入方自己實現，例如重啟當前頁面，關閉當前頁面等。

降級策略流程圖如下：

image.png

3）性能監控

貨拉拉對webview的加載成功率，錯誤碼、耗時進行了統計上報，通過監控面板查看。

此外離線包sdk還有離線包下載，請求，解壓的耗時、結果數據上報。監控和上報採取的接口擴展方式，接入方根據業務特點選用具體的數據上報sdk。

4.4 效能優化

離線包和URL映射配置化

image.png

配置格式如下：主要通過url中的host、path、Fragment配置命中規則。根據接入方是否需要傳入，不需要可以不傳遞。

//匹配規則相關可選ArrayList<String>host=newArrayList<>();ArrayList<String>path=newArrayList<>();ArrayList<String>fragment=newArrayList<>();host.add("www.xxxx.cn");path.add("/aaa");fragment.add("/ccc=ddd");OfflineRuleConfigofflineRuleConfig=newOfflineRuleConfig();offlineRuleConfig.addRule(newOfflineRuleConfig.RulesInfo("offline-pkg-name",host,path,fragment));newOfflineParams().addRule("offline-pkg-name",host,path,fragment)//自定義配置的形式.setRule(Constants.RULE_CONFIG)//json形式的規則.setRule(offlineRuleConfig)//實體類形式{"rules":[{"host":["test1.xxx.cn","test2.xxx.cn"],"path":["/pathA"],"offweb":"offline-pkg-name-a"},{"host":["www.aaa.cn","aaa.xxxx.cn"],"path":["aaa/path","bbb/path"],"offweb":"offline-pkg-name-b"}]}總結

離線包上線後，收益明顯，平均加載速度從2秒提升到1秒，同時H5頁面加載成功率也有提升。頁面主框架（不考慮動態數據）加載成功率從96%提升到100%。