Cordova Hot Code Push外掛程式實現自動更新App的Web內容

Cordova Hot Code Push Plugin

此外掛程式提供了可以使cordova app自動更新web內容的功能。基本上, 你App中所有位於 www 目錄內的檔案都可以被自動更新.

當你重新發布新的app時-重新打包了web內容: html 檔案, JavaScript 代碼, 圖片等等. 一般有兩種方式進行升級:

在appstore中上架新的app. 但是耗時比較長.

犧牲所有原生功能，每次開啟都從遠端網站載入. 但是如果沒有網路，app就沒法使用.

此外掛程式就為瞭解決這個問題而生. 當使用者初次開啟app - 它會將所有web內容複寫一份到外部儲存. 此後從外部儲存載入web內容，而並不載入打包在app內部的web內容. app每次啟動都會串連伺服器檢查更新並下載新的web內容. 如果下載了更新 - 此次更新內容將會在下次app啟動時生效.

這樣, 你的app就得到了即時更新, 並且也能在離線的時候使用. 還有，外掛程式允許你對web內容設定最小支援的app外殼版本, 以保證新的web內容可以在舊的app外殼上運行.

App Store可以上架這種app嗎? 可以... 只要你更新後的web內容符合app一開始的功能. 如果本來是個計算機, 更新後變成了一個音樂播放器 - 這是會被禁止的. 支援平台

Android 4.0.0 或以上.

iOS 7.0 或以上. 文檔

安裝

從低版本遷移

Cordova 項目快速嚮導

Ionic 項目 快速嚮導

更新機制的流程圖

web內容是如何儲存和更新的

Cordova Hot Code Push 命令列用戶端

本地開發擴充

Cordova 配置項

設定檔

Application config app配置

Content manifest 內容清單

Build options build設定

JavaScript 模組

監聽更新的事件

請求更新

安裝更新

運行時改變外掛程式設定

請求從store更新app（外殼）

錯誤碼 安裝

需要cordova 5.0+

cordova plugin add cordova-hot-code-push-plugin

也可直接從 倉庫url 安裝(不穩定)

cordova plugin add https://github.com/nordnet/cordova-hot-code-push.git

外掛程式安裝完後，會推薦你安裝Cordova Hot Code Push 命令列用戶端. 此客戶的可以協助你:

方便產生必須的app設定檔;

啟動本機伺服器，監聽開發模式下的web內容變更，並直接部署新版本.

當然，你也可以不用這個命令列用戶端, 只是用了它會更加方便. 從低版本遷移 從 v1.0.x 到 v1.1.x

在版本 1.0.x 的時候，本地開發模式整合到了此外掛程式裡面. 從 v1.1.x 開始這部分功能作為了此外掛程式的一個擴充，移到了這裡. 因為 v1.0 版本為了支援ios的Swift做了一些最佳化 - 升級到 v1.1.x 你需要禁用它.

重新安裝 iOS platform的辦法:

cordova platform remove ioscordova platform add ios

當 platform 被添加之後 - 所有外掛程式會自動安裝.

進階 - 手動移除 Swift 支援. 你需要用Xcode開啟 iOS 項目, 然後:

在 Build Settings，設定 Embedded Content Contains Swift Code 為 NO.

開啟 <YOUR_PROJECT_NAME>-Prefix.pch , 移除 #import <YOUR_PROJECT_NAME>-Swift.h. 比如:

#ifdef __OBJC__    #import "TestProject-Swift.h"#endif

重新build, 檢查是否正常. Cordova 項目快速嚮導

此嚮導展示了在開發中如何快速使用這個外掛程式. 我們需要添加 開發擴充 ，需要 Xcode 7, 儘管hot code push plugin外掛程式自身可以支援低版本xcode.

建立新的Cordova項目，並添加android和iOS platform:

cordova create TestProject com.example.testproject TestProjectcd ./TestProjectcordova platform add androidcordova platform add ios

或者可以用一個已有的項目.

添加外掛程式:

cordova plugin add cordova-hot-code-push-plugin

添加開發擴充:

cordova plugin add cordova-hot-code-push-local-dev-addon

安裝 Cordova Hot Code Push 命令列用戶端:

npm install -g cordova-hot-code-push-cli

啟動本機伺服器:

cordova-hcp server

你會看到下面的命令列輸出:

Running serverChecking:  /Cordova/TestProject/wwwlocal_url http://localhost:31284Warning: .chcpignore does not exist.Build 2015.09.02-10.17.48 created in /Cordova/TestProject/wwwcordova-hcp local server available at: http://localhost:31284cordova-hcp public server available at: https://5027caf9.ngrok.com

開啟新的控制台, 進入到項目根目錄，運行app:

cordova run

稍等，app會安裝到手機或者模擬器.

現在開啟 TestProject/www/index.html , 做一些改動然後儲存. 幾秒種後你可以在手機或模擬器上看到更新後的頁面.

到此，你可以本地開發，新的web內容會自動在裝置上更新，而無需重新啟動app查看效果. Ionic 項目快速嚮導

此嚮導展示了在開發中如何快速使用這個外掛程式. 我們需要添加 開發擴充 ，需要 Xcode 7, 儘管hot code push plugin外掛程式自身可以支援低版本xcode.

建立新的Ionic項目，並添加android和iOS platform::

ionic start TestProject blankcd ./TestProjectionic platform add androidionic platform add ios

Or use the existing one.

添加外掛程式:

ionic plugin add cordova-hot-code-push-plugin

添加開發擴充:

ionic plugin add cordova-hot-code-push-local-dev-addon

安裝 Cordova Hot Code Push 命令列用戶端:

npm install -g cordova-hot-code-push-cli

啟動本機伺服器:

cordova-hcp server

你會看到下面的命令列輸出:

Running serverChecking:  /Cordova/TestProject/wwwlocal_url http://localhost:31284Warning: .chcpignore does not exist.Build 2015.09.02-10.17.48 created in /Cordova/TestProject/wwwcordova-hcp local server available at: http://localhost:31284cordova-hcp public server available at: https://5027caf9.ngrok.com

開啟新的控制台, 進入到項目根目錄，運行app:

ionic run

稍等，app會安裝到手機或者模擬器.

現在開啟 TestProject/www/index.html , 做一些改動然後儲存. 幾秒種後你可以在手機或模擬器上看到更新後的頁面.

到此，你可以本地開發，新的web內容會自動在裝置上更新，而無需重新啟動app查看效果. 更新機制的流程圖

先防止所有的配置相關的內容弄得你稀裡糊塗 - 先來看看此外掛程式的實現更新功能的流程圖. 應該沒有技術細節.

使用者開啟你的app.

外掛程式初始化，在後台進程啟動 升級載入器（