業(yè)務(wù)量大的手機(jī)客戶端非常適合使用混合開發(fā)方案，開發(fā)效率高抚岗，熱更新，技術(shù)成熟哪怔。好的混合開發(fā)方案宣蔚，既不是完全依仗 H5 前端（客戶端甚至只有一個 WebView 殼），也不是只摻雜少量 H5 頁面（只有一些展示頁是 H5）认境，應(yīng)該是發(fā)揮 H5 和 Native 的各自優(yōu)勢胚委，緊密的配合。如叉信，H5 的導(dǎo)航就可以借助原生導(dǎo)航 混合開發(fā): 原生導(dǎo)航替代瀏覽器導(dǎo)航 Web 頁 js-native-navigation亩冬，兩者相互配合實(shí)現(xiàn)體驗(yàn)的提升巴柿，離線包方案也是其中之一蠢棱。
常用優(yōu)化方案
重度的混合開發(fā)面臨的主要問題就是頁面的加載效率幻赚，弱網(wǎng)的情況下簡直讓人抓狂靶橱。提升頁面的加載效率的主要方法就是使用緩存，眾多緩存方案中营袜，最常使用的就是瀏覽器緩存機(jī)制撒顿，服務(wù)器配置 Cache-Control:max-age=3153600 緩存時間為一年（任意的足夠長時間），而前端資源文件名都帶有 hash 值连茧，如 xxx.6sdf9sdf.js核蘸，資源文件內(nèi)容發(fā)生變化，對應(yīng)的 hash 值也要發(fā)生變化啸驯，如此就能更好的使用瀏覽器緩存客扎，消滅 304，提升頁面的加載效率罚斗。如何對項目資源的文件名徙鱼，資源的 hash 進(jìn)行維護(hù)，就要使用 webpack 工具针姿，在編譯的時候自動幫我們做這些事袱吆。也可以用 service-worker 做緩存，但是 service-worker 的兼容性還不夠理想距淫。
還有一種方案就是離線包方案绞绒，簡單來說，就是客戶端提前將資源下載到客戶端本地存儲榕暇，Webview 從本地加載 H5 頁面及相關(guān)資源蓬衡。說起來簡單，但是實(shí)現(xiàn)起來并不容易彤枢，且會涉及一些問題需要解決狰晚，如接口請求的跨域問題，差量更新問題缴啡，更新失敗的線上應(yīng)急處理等壁晒。
插圖：
離線包實(shí)現(xiàn)邏輯
下面我詳細(xì)敘述下離線包方案的前后臺邏輯。
項目首次上線业栅，后管上傳一份全量離線版本和全量線上版本 1.0秒咐，客戶端第一次啟動時，需要向后臺發(fā)送一個檢查更新接口碘裕，帶上離線包的版本號反镇，第一次啟動沒有離線包，所以版本號送空即可娘汞。后臺會返回 1.0 版本的離線包下載地址，客戶端靜默下載夕玩，并保存到本地你弦。如果下載失敗惊豺，不具備加載離線包的情況下，使用線上版本訪問禽作。
服務(wù)器上有：
1.0 離線包 1.0 線上包
項目更新迭代到了 1.1 版本
后管上傳 1.1 的全量離線包和 1.1 的全量線上包尸昧，后臺對 1.1 和 1.0 的全量離線包進(jìn)行差量比較分析，打包出一份 1.1-1.0 版本的差量離線包旷偿。1.0 線上包做歸檔烹俗，清除∑汲蹋客戶端啟動時幢妄，發(fā)檢查版本請求，上送本地的離線包版本號茫负，服務(wù)端返回對應(yīng)客戶端本地離線包版本的差量更新包蕉鸳，下載完成后，與本地包進(jìn)行文件 merge忍法。merge 完成則更新本地的離線包版本號潮尝。
服務(wù)器上有
1.0 全量離線包（供比對分析用）
1.1 差量離線包（供用戶下載） 1.1 全量離線包 1.1 全量線上包
項目繼續(xù)更新迭代到 1.2 版本
后管上傳 1.2 的全量離線包和 1.2 的全量線上包，后臺對 1.2 和 1.1饿序，1.0 的全量離線包分別進(jìn)行差量比較分析勉失，打包出一份 1.2-1.1 和 1.2-1.0 版本的差量離線包。 1.1 的差量包和線上包可以歸檔原探，清除乱凿。客戶端邏輯同上
服務(wù)器上有
1.0 全量離線包
1.1 全量離線包
1.2 全量離線包踢匣，1.2 - 1.1 差量包告匠，1.2 - 1.0 差量包，1.2 線上包
項目再次更新迭代离唬，以此類推后专，如果本地不想保存過多的差量包，可以設(shè)置如果舊版本號超出兩個版本输莺，則使用新版本的全量更新離線包進(jìn)行更新戚哎。
客戶端的 Webview 訪問本地資源，前端的 Api 請求需要借助原生來發(fā)送請求接口（js-native 交互）來解決跨域問題嫂用。
方案優(yōu)缺點(diǎn)對比
| 方案 | 優(yōu)點(diǎn) | 缺點(diǎn) |
|---|---|---|
| 瀏覽器緩存 | 輕量型凳，實(shí)現(xiàn)簡單 | 瀏覽器緩存大小限制 |
| 離線包方案 | 無緩存大小限制，控制靈活嘱函，可以緩存任意資源 | 實(shí)現(xiàn)復(fù)雜甘畅，開發(fā)成本較大 |
總結(jié)
業(yè)務(wù)量較大，重度混合開發(fā)項目，且公司具備足夠的研發(fā)資源可以使用離線包方案疏唾。業(yè)務(wù)量一般蓄氧，或輕混合開發(fā)，或研發(fā)資源緊張的公司不適合離線包方案槐脏。
