Ionic APP 熱更新 之 產品發佈狀態下的熱更新搭建，去local-dev-addon插件

上一篇，咱們介紹了在本地開發環境下的ionic項目熱更新測試，

本文，咱們將詳細說明如何在去掉cordova-hot-code-push-local-dev-addon插件的狀況下，實現熱更新。

 

使用步驟：

1.安裝CLI：npm install -g cordova-hot-code-push-cli

這裏，須要詳細描述一下CLI 提供的各類命令，後面咱們將會用到。使用辦法：cordova-hcp <command>，<command>包括：

　　（1）init：爲項目初始化參數，建立默認的cordova-hcp.json文件。

　　（2）build：編譯項目代碼，在www文件夾下生成chcp.json和chcp.manifest文件，爲部署作準備。

　　（3）server：在本地啓一個服務器，用於本地的開發和測試，這在前一篇中有過描述。

　　（4）login：建立用於在遠程服務器上部署項目文件的登陸憑據。

　　（5）deploy：上傳項目文件到遠程服務器。

注意：上述命令必須運行在ionic項目的根目錄。

 

2.安裝插件：ionic cordova plugin add cordova-hot-code-push-plugin

 

3.cordova-hcp init，爲項目生成配置模板，會在根目錄下建立cordova-hcp.json文件

部分配置項能夠直接回車跳過，完成後，會在項目的根目錄下建立cordova-hcp.json文件：

咱們能夠打開文件看一下，其格式以下：

說明：這一步若是你們不理解，也能夠先跳過，後面手動建立cordova-hcp.json文件也是能夠的。

關於init命令，詳細可參考：https://github.com/nordnet/cordova-hot-code-push-cli#init-command

 

4.cordova-hcp build，編譯項目文件，並在www文件夾下生成chcp.json和chcp.manifest文件

chcp.json：包含應用發佈的相關信息，好比www內容的遠程服務器地址content_url、www文件的版本號release等等。

chcp.manifest：包含web項目文件的相關信息，它們的相對路徑和hash值。

熱更新插件經過比對本地該文件下的對應hash值與服務器上的文件的hash值判斷哪些文件須要更新、哪些文件須要新增等。

 

 5.因爲這幾個步驟中都涉及遠程服務器的配置，這裏我就在本身的電腦上搭建了一個測試站點，模擬遠程服務器的做用。

我使用的是IIS，你們用其餘的web server也能夠。物理路徑你們本身選擇，這裏站點對應的目錄是空的，尚未部署www的內容。

 

 在IIS管理器中是這個樣子的：

這樣我用於測試的遠程服務器地址就是：http://10.200.223.160:8022

與此同時，在此站點的根目錄下咱們建立一個空的www文件夾，用於後面部署ionic www裏面的內容。這一步內容先無論。完成後啓動站點。

 

6.將上面步驟3和步驟4中涉及遠程服務器地址的地方，替換爲咱們本身搭建的服務器地址，好比：

將http://myserver.com/hotcodepush/www 替換爲http://10.200.223.160:8022/www/

回到咱們的ionic項目，在config.xml文件中，咱們須要添加如下內容：

代碼部分的修改完成之後，咱們直接打包APP便可，用於後面的測試。

ionic cordova build android --prod 。生成安裝包並安裝到手機，不詳述。

 

 7.接下來就是涉及遠程服務器部署的事情了。假定此時咱們對代碼進行了更新，並將最新的編譯結果提交到遠程服務器，以供客戶端下載。

注意我修改了一下home.html：

接下來的流程就是，不要走錯：

（1）執行ionic build --prod，以將咱們修改的代碼，編譯生成最新的www。注意--prod參數，以減少www文件內容的大小；

（2）執行cordova-hcp build，以生成最新的chcp.json和chcp.manifest文件；

（3）完成後將www文件夾裏面的內容，拷貝到咱們遠程服務器的www目錄下便可。GitHub上介紹的是經過cordova-hcp deploy來進行部署，

　　該命令暫時只支持亞馬遜的服務器，因此咱們能夠無視此命令，手動部署便可。

 

8.遠程服務器上的更新部署完畢以後，咱們重啓咱們的APP，會自動去服務器上下載更新內容，而且能夠看到修改的內容生效。

關於什麼時候加載更新內容，就是前面update參數的設置，包括start、resume、now三種。

實現的效果就是：

      

這樣，關於產品發佈狀態（非本地開發環境、不依賴於開發插件）下的Ionic項目熱更新測試就完成了。

 

注意事項：

1.測試過程當中，搭建的站點不識別.json格式，請爲站點添加MIME類型；

 完成後最好用手機瀏覽器測試一下，以確保配置文件可正常訪問：

 

 2.代碼產生變更後，務必先用ionic build --prod編譯一下，再經過cordova-hcp build生成最新的配置文件。

兩個步驟不能漏，也不能反，完成後再將最新生成的www目錄拷貝到遠程服務器部署。

 

3.當上述步驟都沒有問題，APP卻不能實現更新，或者更新出現異常，多半是遠程服務器上的站點出現了問題，

因此先用瀏覽器測試一下遠程服務器，是否可正常訪問。一般只要升級目錄沒問題，熱更新就能夠正常使用。

 

4.IIS站點部署的內容頻繁替換的時候，有的時候更新內容不能當即生效，由於站點會緩存；測試的時候想讓更新當即生效，能夠重啓IIS站點。