移動 App 的運行環境具備帶寬不穩定,流量收費,啓動速度比較重要等特色,因此混合 App 如何加載 Web 資源並非一個新問題。本文目的是總結出一種資源打包下載的思路和方案,而且提供一種打包工具。本文提到的思路只是一家之言,基本沒有參考現有方案,各位方家有不一樣意見歡迎留言。另外本文沒有涉及到 App 內部如何加載資源的問題,這部分我會專門撰寫一篇文章討論。前端
通常來講,Hybrid-app 對於 Web 資源下載有以下需求:node
頁面開啓速度要快,因此資源的下載和使用不是在同一時間進行的,有一個「預下載」的過程。nginx
資源不能重複下載,因此要有緩存,可是有更新的時候必須及時更新。鑑於 WebView 的緩存可控性不強,因此要有一套自定義緩存機制。git
爲了節省流量加快速度,若是資源以壓縮包爲單位總體下載,那麼資源更新時要支持增量更新。同時,對於設備端資源與最新版本相隔一個版本以上的狀況,要提供全量更新。github
爲了維持必定的健壯性,Web 資源在設備本地和線上應各有一份部署,能夠隨時切換。尤爲是當設備本地緩存被刪除時,能夠臨時切換到線上。web
爲了方便開發和部署,筆者設計了以下打包方案:算法
發佈包分爲四部分:npm
第一,是將整個 Web 資源目錄打成一個壓縮包(bundle.zip)。json
第二,基於上一個版本,構建一個最新版本的增量壓縮包(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:
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 格式記錄了新版本和上一個版本的版本號。