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

綜述

移動 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:

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 格式記錄了新版本和上一個版本的版本號。

相關文章
相關標籤/搜索