綜述

移動(dòng) App 的運(yùn)行環(huán)境具有帶寬不穩(wěn)定，流量收費(fèi)，啟動(dòng)速度比較重要等特點(diǎn)，所以混合 App 如何加載 Web 資源并不是一個(gè)新問(wèn)題。本文目的是總結(jié)出一種資源打包下載的思路和方案，并且提供一種打包工具。本文提到的思路只是一家之言，基本沒(méi)有參考現(xiàn)有方案，各位方家有不同意見(jiàn)歡迎留言。另外本文沒(méi)有涉及到 App 內(nèi)部如何加載資源的問(wèn)題，這部分我會(huì)專門撰寫一篇文章討論。

需求梳理

一般來(lái)說(shuō)，Hybrid-app 對(duì)于 Web 資源下載有如下需求：

頁(yè)面開(kāi)啟速度要快，所以資源的下載和使用不是在同一時(shí)間進(jìn)行的，有一個(gè)“預(yù)下載”的過(guò)程。

資源不能重復(fù)下載，所以要有緩存，但是有更新的時(shí)候必須及時(shí)更新。鑒于 WebView 的緩存可控性不強(qiáng)，所以要有一套自定義緩存機(jī)制。

為了節(jié)省流量加快速度，如果資源以壓縮包為單位整體下載，那么資源更新時(shí)要支持增量更新。同時(shí)，對(duì)于設(shè)備端資源與最新版本相隔一個(gè)版本以上的情況，要提供全量更新。

為了維持一定的健壯性，Web 資源在設(shè)備本地和線上應(yīng)各有一份部署，可以隨時(shí)切換。尤其是當(dāng)設(shè)備本地緩存被刪除時(shí)，可以臨時(shí)切換到線上。

資源打包方案

為了方便開(kāi)發(fā)和部署，筆者設(shè)計(jì)了如下打包方案：

發(fā)布包分為四部分：

第一，是將整個(gè) Web 資源目錄打成一個(gè)壓縮包(bundle.zip)。

第二，基于上一個(gè)版本，構(gòu)建一個(gè)最新版本的增量壓縮包(update.zip)。為了簡(jiǎn)化開(kāi)發(fā)，我使用了文件級(jí)的 diff 算法——也就是說(shuō)，對(duì)比兩個(gè)版本的程序目錄，將新增和有改動(dòng)的文件連帶目錄結(jié)構(gòu)打成壓縮包。對(duì)于新版本中被刪除的文件，本方案忽略，因?yàn)?Web 前端程序中多一個(gè)文件并不會(huì)有任何影響。

第三，整個(gè) Web 資源目錄以目錄的形式存在于發(fā)布包中，目錄名為 /web，當(dāng)設(shè)備端本地資源不能用時(shí)，可以直接使用 Web 目錄中的線上資源。另外，為了方便單步調(diào)試，調(diào)試版 App 也使用線上資源。

第四，版本信息文件 update.json，本次發(fā)布的版本號(hào)、上一個(gè)版本號(hào)，以及發(fā)布時(shí)間存在于這個(gè)文件中，供 App 定時(shí)下載檢查。update.json 格式如下：

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

以上就是整個(gè)發(fā)布目錄結(jié)構(gòu)，將這個(gè)目錄整體上傳到后端云存儲(chǔ)，提供下載鏈接，App 即可實(shí)現(xiàn)下載更新等功能。在暫時(shí)不用考慮 App 版本和 Web 版本配合問(wèn)題的前提下，為了方便 App 開(kāi)發(fā)，筆者使用了恒定不變的 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/

這樣做的好處是設(shè)計(jì) App 時(shí)約定好 URL，這些 URL 就不會(huì)變了，App 只要定時(shí)拉取 update.json 檢查版本，該更新更新即可，Web 資源發(fā)布時(shí)只要替換掉相應(yīng)的文件即可，流程比較簡(jiǎn)化。這樣的方案導(dǎo)致線上只有一個(gè)版本，所以如果你的項(xiàng)目中不同版本 App 需要不同版本的 Web 資源配合，那么你就不能使用這種方式。

資源打包工具

方案確定后，我們還需要一個(gè)打包工具，方便開(kāi)發(fā)人員發(fā)布資源。顯然，這個(gè)工具不能要求開(kāi)發(fā)人員自己保留老版本目錄，所以我們需要依托于版本控制工具。筆者使用 node.js 開(kāi)發(fā)了一個(gè)基于 svn 的命令行打包工具 packr：

packr 的原理很簡(jiǎn)單：由發(fā)布人員確定發(fā)布項(xiàng)目的 svn 地址、本次要發(fā)布的 svn 版本號(hào)，以及上次發(fā)布的 svn 版本號(hào)，packr 會(huì)按照上面的方案將資源打成一個(gè)發(fā)布包。如果你用 git 的話，可以簡(jiǎn)單改一下底層的版本控制組件。這個(gè)工具本身和前端開(kāi)發(fā)無(wú)關(guān)，你可使用它為任何項(xiàng)目打發(fā)布包。

packr 的使用說(shuō)明如下：

靜態(tài)資源打包工具(packr)使用說(shuō)明

綜述

packr 是專為移動(dòng) app 混合開(kāi)發(fā)設(shè)計(jì)的 web 靜態(tài)資源打包工具。

packr 通過(guò)比較兩個(gè) svn 版本的區(qū)別(目前還不支持

git)，將靜態(tài)資源項(xiàng)目打包為全量更新包、增量更新包，以及線上資源目錄，同時(shí)生成版本信息 update.json。

運(yùn)行環(huán)境

packr 基于 nodejs 實(shí)現(xiàn)，使用前請(qǐng)先安裝 nodejs。

packr 依賴的 npm 模塊需要聯(lián)網(wǎng)安裝，請(qǐng)確保連入互聯(lián)網(wǎng)。

packr 依賴 svn 命令行工具，使用前請(qǐng)安裝 svn 并確保環(huán)境變量 Path 中有相關(guān)目錄。

packr 沒(méi)有 svn 賬戶設(shè)置入口，使用前請(qǐng)確保 svn 已經(jīng)保存了可用的賬戶名。

packr 為命令行工具，使用前請(qǐng)確保環(huán)境變量 Path 中有 packr 根目錄。

運(yùn)行前準(zhǔn)備

假設(shè) packr 根目錄為 /usr/local/packr

cd /usr/local/packr npm install

命令參數(shù)

packr 命令格式如下：

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

其中：

prefix 為輸出目錄，如果不設(shè)置，則輸出于當(dāng)前目錄。

currentVersion 為當(dāng)前發(fā)布版本的 svn 版本號(hào)。

lastVersion 為上一個(gè)版本的 svn 版本號(hào)。

repositoryURL 為 svn 版本庫(kù)地址。

輸出

packr 輸出為一個(gè) zip 壓縮包，其中有如下文件或目錄：

bundle.zip 新發(fā)布版本的全量更新包。

patch.zip 增量更新包，其中有新增和改動(dòng)過(guò)的文件。

web 線上資源目錄，供客戶端或?yàn)g覽器在不使用緩存時(shí)直接訪問(wèn)。

update.json 版本信息文件，其中以 json 格式記錄了新版本和上一個(gè)版本的版本號(hào)。

總結(jié)

以上是生活随笔為你收集整理的混合式app php怎么打包,如何实现混合 App Web 资源的打包与增量更新的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。