ionic 熱更新 cordova-hot-code-push

cordova-hot-code-push ,Cordova熱代碼推送插件提供了在應用程序中執行基於Web的內容的自動更新的功能。使用此插件能夠更新存儲在項目的www文件夾中的全部內容。

cordova-hot-code-push 插件的github url :https://github.com/nordnet/cordova-hot-code-push

更新流程

用戶打開應用程序，Plugin get被初始化，並在後臺線程中啓動更新加載程序。更新加載器config-file從config.xml指定的網址載入並加載JSON。而後將release加載的配置的版本與當前安裝的配置進行比較。若是他們不一樣 - 咱們去下一步，程序經過content_url配置來加載清單文件。

 

1.建立一個ionic 項目

首先你先新建一個ionic項目，在這裏我新建的是ionic版本是3.5

ionic start CordovaHotCodePush tabs

cd CordovaHotCodePush

npm install

ionic serve

2.添加插件

添加cordova-hot-code-push插件

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

添加用於本地開發的插件

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

安裝Cordova Hot Code Push CLI客戶端：

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

3.配置

找到項目目錄下的config.xml文件，添加如下信息到config.xml文件中：

<chcp>
     <config-file url="http://192.168.1.203:8121/chcp.json" />

       <native-interface version="1" />

</chcp>

這裏說明下關於config.xml文件裏<chcp></chcp>應該怎麼配置。

配置文件url：

<chcp>
     <config-file url="http://192.168.1.203:8121/chcp.json" />
</chcp>

URL指向的是我服務器更新文件的路徑的chcp.json文件，在這裏我是部署在iis 上，網站的物理路徑我直接指向了項目的www文件夾。

在本地開發模式的狀況下，若是config-file未定義，則會自動設置爲本地服務器上的應用程序配置路徑。

定義當前版本：

<chcp>
    <native-interface version="5" /> </chcp>

若是你應用程序的版本比服務器的版本還高，那麼插件將不會從服務器加載新的更新，默認設置爲1。

自動下載：

<chcp>
  <auto-download enabled="false" /> </chcp>

定義插件是否容許下載更新。最初更新提取是自動執行的，但您能夠禁用它，並經過JavaScript模塊手動執行。默認狀況下，首選項設置爲true。

 

自動安裝：

<chcp>
  <auto-install enabled="false" /> </chcp>

定義插件是否容許安裝更新。最初更新安裝是自動執行的，但您能夠禁用它，並經過JavaScript模塊手動執行。默認狀況下，首選項設置爲true。

 

而後運行：

cordova-hcp sever

cordova-hcp build

如今 在項目文件下的www文件裏面咱們能夠看到兩個新增的文件，chcp.json和chcp.manifest。

chcp.json就是我上面說的config.xml裏 config-file url 指向的那個chcp.json文件。

 

接下來詳解一下chcp.json裏面有什麼東西

當你運行cordov-hcp build 的時候 她裏面的東西就會自動更新成這樣

{
  "autogenerated": true,
  "release": "2017.07.08-16.34.13"
}

release是咱們生成的時間，除了這兩個，還有其餘的須要配置的。

content_url：服務器地址 咱們在config.xml配置的config-file 是這個http://192.168.1.203:8121/chcp.json，那麼這裏咱們就是這樣的http://192.168.1.203:8121。

min_native_interface：版本設置。在config.xml咱們設置的native-interface version=5 那麼咱們生成的就會是 "min_native_interface"：5.

update:能夠設置的值有start：啓動應用程序時安裝更新；resume：從後臺狀態恢復應用程序時安裝更新；now：一旦下載就安裝更新；


如今咱們將chcp.json 文件修改爲這樣
resume：從後臺狀態恢復應用程序時安裝更新；now：一旦下載就安裝更新；


如今咱們將chcp.json 文件修改爲這樣

{
  "autogenerated": true,
  "release": "2017.07.08-16.56.31",
  "name": "hea",
  "content_url": "http://192.168.1.203:8121",
  "update": "start",
  "min_native_interface": 1
}

4.添加安卓平臺

cordova platform add android

運行在真機上

cordova run android

5.測試是否成功

咱們修改項目的內容

而後 ionic serve 編譯,跑在瀏覽器上咱們的頁面內容確實改變了。咱們再運行cordova-hcp bulid,根據第三點配置，配置好chcp.json文件。

{
  "autogenerated": true,
  "release": "2017.07.08-17.22.34",
  "name": "hea",
  "content_url": "http://192.168.1.203:8121",
  "update": "start",
  "min_native_interface": 1
}

剛纔不是 cordova run android 在真機上了嘛，如今咱們退出應用程序，再打開應用程序能夠發現內容已經改變了。

本來項目內容：                                                                           退出應用再打開時候內容：

         

 

若是你對此文章有疑問的歡迎評論，此隨筆乃本人原創僅做記錄，如若轉載請說明出處。

如果此文章對你有幫助，文章右下方點贊推薦。