談談混合 App Web 資源的打包與增量更新

綜述

移動 App 的運行環境具備帶寬不穩定，流量收費，啓動速度比較重要等特色，因此混合 App 如何加載 Web 資源並非一個新問題。本文目的是總結出一種資源打包下載的思路和方案，而且提供一種打包工具。本文提到的思路只是一家之言，基本沒有參考現有方案，各位方家有不一樣意見歡迎留言。另外本文沒有涉及到 App 內部如何加載資源的問題，這部分我會專門撰寫一篇文章討論。

需求梳理

通常來講，Hybrid-app 對於 Web 資源下載有以下需求：

• 頁面開啓速度要快，因此資源的下載和使用不是在同一時間進行的，有一個「預下載」的過程。

• 資源不能重複下載，因此要有緩存，可是有更新的時候必須及時更新。鑑於 WebView 的緩存可控性不強，因此要有一套自定義緩存機制。

• 爲了節省流量加快速度，若是資源以壓縮包爲單位總體下載，那麼資源更新時要支持增量更新。同時，對於設備端資源與最新版本相隔一個版本以上的狀況，要提供全量更新。

• 爲了維持必定的健壯性，Web 資源在設備本地和線上應各有一份部署，能夠隨時切換。尤爲是當設備本地緩存被刪除時，能夠臨時切換到線上。

資源打包方案

爲了方便開發和部署，筆者設計了以下打包方案：

發佈包分爲四部分：

第一，是將整個 Web 資源目錄打成一個壓縮包（bundle.zip）。

第二，基於上一個版本，構建一個最新版本的增量壓縮包（update.zip）。爲了簡化開發，我使用了文件級的 diff 算法——也就是說，對比兩個版本的程序目錄，將新增和有改動的文件連帶目錄結構打成壓縮包。對於新版本中被刪除的文件，本方案忽略，由於 Web 前端程序中多一個文件並不會有任何影響。

第三，整個 Web 資源目錄以目錄的形式存在於發佈包中，目錄名爲 /web，當設備端本地資源不能用時，能夠直接使用 Web 目錄中的線上資源。另外，爲了方便單步調試，調試版 App 也使用線上資源。

第四，版本信息文件 update.json，本次發佈的版本號、上一個版本號，以及發佈時間存在於這個文件中，供 App 定時下載檢查。update.json 格式以下：

{"releaseTime":"160530161454","version":9601,"lastVersion":9596}

以上就是整個發佈目錄結構，將這個目錄總體上傳到後端雲存儲，提供下載連接，App 便可實現下載更新等功能。在暫時不用考慮 App 版本和 Web 版本配合問題的前提下，爲了方便 App 開發，筆者使用了恆定不變的 URL，好比：

http://www.url_prefix.com/some_folder/webapp/app_name/update.json http://www.url_prefix.com/some_folder/webapp/app_name/bundle.zip http://www.url_prefix.com/some_folder/webapp/app_name/update.zip http://www.url_prefix.com/some_folder/webapp/app_name/web/

這樣作的好處是設計 App 時約定好 URL，這些 URL 就不會變了，App 只要定時拉取 update.json 檢查版本，該更新更新便可，Web 資源發佈時只要替換掉相應的文件便可，流程比較簡化。這樣的方案致使線上只有一個版本，因此若是你的項目中不一樣版本 App 須要不一樣版本的 Web 資源配合，那麼你就不能使用這種方式。

資源打包工具

方案肯定後，咱們還須要一個打包工具，方便開發人員發佈資源。顯然，這個工具不能要求開發人員本身保留老版本目錄，因此咱們須要依託於版本控制工具。筆者使用 node.js 開發了一個基於 svn 的命令行打包工具 packr：

https://github.com/yusangeng/packr

packr 的原理很簡單：由發佈人員肯定發佈項目的 svn 地址、本次要發佈的 svn 版本號，以及上次發佈的 svn 版本號，packr 會按照上面的方案將資源打成一個發佈包。若是你用 git 的話，能夠簡單改一下底層的版本控制組件。這個工具自己和前端開發無關，你可以使用它爲任何項目打發布包。

packr 的使用說明以下：

靜態資源打包工具（packr）使用說明

綜述

packr 是專爲移動 app 混合開發設計的 web 靜態資源打包工具。

packr 經過比較兩個 svn 版本的區別（目前還不支持
git），將靜態資源項目打包爲全量更新包、增量更新包，以及線上資源目錄，同時生成版本信息 update.json。

運行環境

• packr 基於 nodejs 實現，使用前請先安裝 nodejs。

• packr 依賴的 npm 模塊須要聯網安裝，請確保連入互聯網。

• packr 依賴 svn 命令行工具，使用前請安裝 svn 並確保環境變量 Path 中有相關目錄。

• packr 沒有 svn 帳戶設置入口，使用前請確保 svn 已經保存了可用的帳戶名。

• packr 爲命令行工具，使用前請確保環境變量 Path 中有 packr 根目錄。

運行前準備

假設 packr 根目錄爲 /usr/local/packr

cd /usr/local/packr npm install

命令參數

packr 命令格式以下：

packr -p=${prefix} -c=${currentVersion} -l=${lastVersion} -r=${repositoryURL}

其中：

• prefix 爲輸出目錄，若是不設置，則輸出於當前目錄。

• currentVersion 爲當前發佈版本的 svn 版本號。

• lastVersion 爲上一個版本的 svn 版本號。

• repositoryURL 爲 svn 版本庫地址。

輸出

packr 輸出爲一個 zip 壓縮包，其中有以下文件或目錄：

• bundle.zip 新發布版本的全量更新包。

• patch.zip 增量更新包，其中有新增和改動過的文件。

• web 線上資源目錄，供客戶端或瀏覽器在不使用緩存時直接訪問。

• update.json 版本信息文件，其中以 json 格式記錄了新版本和上一個版本的版本號。