原理

外掛安裝

1.安裝python，cordova-hcp cli 依賴此程式

下載地址：https://www.python.org/downloads/release/python-2712/

2.cordova-hcp cli安裝

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

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

4.新增本地開發外掛[可選]，主要是針對真機除錯時，不想頁面有改動就要重新打包安裝至真機的情形下，可以安裝此外掛，在釋出時，應該移除該外掛。

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

5.啟動cordova-hcp 本地服務，控制元件臺輸入：

cordova-hcp server

啟動後，控制檯看到類似以下輸出：

Running server
Checking:  /Cordova/TestProject/www
local_url http://localhost:31284
Warning: .chcpignore does not exist.
Build 2015.09.02-10.17.48 created in /Cordova/TestProject/www
cordova-hcp local server available at: http://localhost:31284
 

cordova-hcp public server available at: https://5027caf9.ngrok.com

同時，我們的專案的www目錄下將自動生成chcp.json和chcp.manifest兩個配置檔案，chcp.json檔案主要是外掛的配置資訊，chcp.manifest檔案則是我們www目錄下各檔案的hash值參照表。

6.將app安裝至真機執行，以android為例：

ionic run android

7.在www目錄下任意修改某檔案後，手機上的app就能馬上看到實時更新內容。

更新內容從伺服器下載

上面的方式只適應於本地開發，但，我們實際釋出後的app肯定不能以這種方式來熱更新，那麼，我們需要將www下的更新內容提交至相應的伺服器，以便客服端下載更新。我目前採取的方式是通過hudson從svn上下載最新的程式碼後，將更新後代碼打包釋出至相應伺服器。hudson的配置，此處就不詳細介紹了。要實現從指定伺服器上下載，需要如下操作：

1.在專案的根目錄建立cordova-hcp.json檔案，新增這個檔案的目的，是為了今後使用cordova-hcp build 命令時，不用每次手動去修改chcp.json配置檔案。內容如下：

{
  "autogenerated": true,
  "content_url": "http://hotcode.example.com",
  "update": "start"
}

• content_url：表示你的www目錄下的檔案所處伺服器地址
• update：更新方式，我採用的是預設方式(app啟動後檢查更新)

根據你專案的情況選擇合適的方式，更新方式有三種：

• start ：app啟動時安裝更新. 預設值.
• resume ： app從後臺切換過來的時候安裝更新.
• now ：web內容下載完畢即安裝更新.

2.修改專案的config.xml檔案，新增如下內容，指定客服端需要從哪請求最新的chcp.json配置檔案，這裡我們指定為www目錄檔案提交的伺服器地址

<chcp>
   <config-file url="http://hotcode.example.com/chcp.json"/>
 </chcp>

3.重新編譯並將app安裝至手機

cordova-hcp build

ionic run android

4.修改www目錄下任意檔案並重新編譯，然後將www目錄下的內容提交至伺服器，最後，手機上app退出後，重新開啟將實時更新

cordova-hcp build

記住，有修改檔案要重新編譯，以更新chcp.json和chcp.manifest兩個配置檔案，這兩個檔案有更新後，客服端才能判斷是否需要從伺服器上下載新的檔案。

app 外殼更新

通過上面的方式，我們已經能夠實現www目錄下的檔案有變動時，直接從伺服器上下載最新的程式碼，但這種方式只限於我們沒有對app外殼進行更新的情況下使用，當我們對外殼進行了更新時，我們應該提示使用者升級app，比如我們增加了某個外掛時。要實現app外殼更新，我們需要做如下操作：

1.修改我們專案的config.xml，在原有配置上增加native-interface屬性，告訴cordova-hot-code-push外掛，我們的app核心版本號，修改後的配置如下：

<chcp>
    <native-interface version="3"/>
    <config-file url="http://hotcode.example.com/chcp.json"/>
  </chcp>

2.修改cordova-hcp.json檔案，增加min_native_interface屬性，cordova-hcp build
後，chcp.json將會增加min_native_interface屬性。

{
  "autogenerated": true,
  "content_url": "http://hotcode.example.com",
  "update": "start"
  "min_native_interface": 3
}

此屬性將與config.xml中的native-interface進行匹配，如果發現兩者不同時，將會觸發相應的事件，比如，手機端app中config.xml的native-interface值比伺服器上的chcp.json檔案中的min_native_interface值小時，將會觸發’chcp_updateLoadFailed’事件，同時，錯誤程式碼為：chcp.error.APPLICATION_BUILD_VERSION_TOO_LOW

var appUpdate = {
        initialize: function() {
            this.bindEvents();
        },
        bindEvents: function() {
            document.addEventListener('chcp_updateLoadFailed', this.onUpdateLoadError, false);
        },
        onUpdateLoadError: function(eventData) {
            var error = eventData.detail.error;

            // 當檢測到外殼有更新
            if (error && error.code == chcp.error.APPLICATION_BUILD_VERSION_TOO_LOW) {
                // 針對不同平臺進行相應更新操作    
            ｝
        }
    };
    appUpdate.initialize();