Cordova熱更新和App升級 - 簡書

原文: Cordova熱更新和App升級 - 簡書

公司的cordova項目前段時間增長了熱更新功能，本身第一次作的時候在網上查找了不少資料，有的資料寫的並不全面遇到了不少坑。所以總結一些在開發過程當中遇到了問題和解決辦法。

cordova項目熱更新分爲兩個部分，網頁內容（web content)更新和Cordova插件(native side)更新。前者是網頁內容，後者是 cordova 插件。web content 的運行是基於 native side。如:登陸頁面的微信登陸，須要在項目中集成微信的插件才能實現登陸。

web代碼的更新

此更新方式，只須要更新web前段代碼，不須要更新android的原生代碼。只是對js、html等的更新。

一、添加插件 Cordova Hot Code Push

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

二、添加熱更新工具 cordova-hot-code-push-cli

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

三、添加cordova-hcp.json文件

此文件是用於方便生成www文件下chcp.json文件的內容。

執行命令（必須在項目根目錄執行更新工具的命令）

cordova-hcp init

生成的默認應用程序配置文件(cordova-hcp.json)在項目根文件夾中。

執行時將要求您從命令行中填寫一些項目首選項：

• Project name: 你如今的項目名稱所需.
• Amazon S3 Bucket name:亞馬遜上的S3桶的名字。能夠跳過。
• Amazon S3 region: 亞馬遜S3地區。能夠跳過。
• iOS app identifier: 應用程序商店的應用程序ID。App升級是跳轉應用商店進行升級。
• Android app identifier: 能夠App在應用商城的地址，或者是apk的下載地址。
• Update method: 什麼時候執行更新。
  • start: 在啓動應用程序時安裝更新。
  • resume: 在恢復應用程序(從背景移動到前景狀態)或啓動時，安裝更新；默認使用。
  • now: 從服務器加載更新後當即安裝。

cordova-hcp.json文件內容：

{
  "name": "",//可爲空
  "autogenerated": true,//若是不添加，熱更新會不能使用
  "ios_identifier": "id123456789",//應用在App store id(可爲空)
  "android_identifier": "",//應用在應用商城上的地址或者App的下載地址(可爲空)
  "update": "start",//在應用啓動時安裝
  "min_native_interface": 1,//可用以作App升級（能夠不填)
  "content_url":
  "http://************/cordova/www"//www文件在服務器上的地址
}

"autogenerated": true 這個值執行命令後是沒有的須要本身手動添加，若是不添加網頁內容更新將會無效。

四、在www文件下生成chcp.json 和 chcp.manifest文件

• chcp.json: 包含發佈相關信息：熱更新代碼版本號，應用 native side 版本號等等
• chcp.manifest: 包含項目熱更新代碼(靜態)文件信息：文件名和文件哈希值

執行命令

cordova-hcp build

執行此命令會在chcp.json文件中增長"release":"當前時間"字段。（默認使用時間戳，格式爲：yyyy.MM.dd-HH.mm.ss），插件將版本號進行字符串相等比較來判斷是否存在新版本。

"release": "2017.06.07-16.30.20",//惟一web項目版本號,用與熱更新web內容的更新。（必需）

五、config.xml 配置

最好寫在底部方便之後配置修改

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

    <auto-install enabled="true" />

    <native-interface version="1" />
    
    <config-file url="https://************/cordova/www/chcp.json" />
</chcp>

• config-file：配置文件 chcp.json 從服務器上加載的路徑（必須的配置項）
• auto-download：是否自動下載熱更新代碼，默認是 true
• auto-install：是否自動安裝熱更新代碼，默認是 true
• native-interface：當前 native side 的版本號

六、將www文件放到服務器

這一步我是直接將項目的www文件夾放到服務器上，而後重啓app，就可實現App的web內容代碼的熱更新了。須要注意的是www文件在服務地地址必定要與"content_url":"http://************/cordova/www"和config.xml中<config-file url="https://************/cordova/www/chcp.json" /> 填寫的地址一致。

更新App

其實完成上面步驟，就能夠實現熱更新功能了。可是當咱們增長了cordova插件或者原生中添加了第三方庫等，須要對App升級。那麼這個時候就要去對應的商城下載apk（蘋果去app store升級）所以還須要下面的配置。

一、config.xml 配置中定義native side 版本號

<chcp>

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

此配置會與服務器上配置文件 chcp.json 中的 min_native_interface 值做比較 。

1. 兩個值相同 ，不提示升級，可是網頁內容能夠更新。

2. 若是大於服務器上的值，不會提醒更新，可是網頁內容能夠更新。

3. 小於服務上的值，提示應用須要更新升級，那麼熱更新將沒法正常進行。

二、添加JS代碼  Wiki文檔

document.addEventListener('deviceready', () => {
    let chcp = window.chcp;

    // 檢測更新
    chcp.fetchUpdate((error, data) => {


      if (error) {
        console.log('--更新版本異常，或其餘錯誤--', error.code, error.description);
        if (error.code === -2) {
          var dialogMessage = '有新的版本是否下載';
          //調用升級提示框 點擊確認會跳轉對應商店升級
          chcp.requestApplicationUpdate(dialogMessage, null, null);
        }
      }
      // 服務器版本信息
      // console.log('--更新的版本信息--', data.config);
      // 版本信息
      chcp.getVersionInfo((err, data) => {

        console.log('服務器應用時間版本: ' + data.readyToInstallWebVersion);

        console.log('當前應用時間版本： ' + data.currentWebVersion);

        console.log('當前應用version name: ' + data.appVersion);

      });

    });
  });

若是當前APP中的<native-interface version="1"/>低於服器上chcp.json中min_native_interface的值，那麼執行熱更新就會提示錯誤：chcp.error.APPLICATION_BUILD_VERSION_TOO_LOW，返回的異常碼爲-2。這個時候咱們應當提示用戶前往應用商店對APP進行升級。

須要注意的是，若是彈出的升級提示框點擊確認的跳轉對應平臺升級app的地址，是咱們在cordova-hcp.json中填寫的地址；若是點擊了取消，那麼就不會升級，而且網頁的熱更新功能也將失效，除非升級爲最新的apk。

詳細錯誤代碼參考

總結：

熱更新分爲網頁內容的跟新和cordova插件的更新,前者更新不須要升級App，後者須要升級App，在使用熱更新功能是最好是兩個功能都要實現。

---

補充：

1. cordova若是網頁內容和App升級兩個都要實現，請將config.xml配置選項

<auto-download enabled="true" />
<auto-install enabled="true" />

2. cordova熱更新彈出框很難看，android測試爲黑色背景綠色文字。網上找了不少的資料，也沒能找到解決cordova自帶對話框樣式的方法。若是有解決的方法請留意一下，謝謝！

相關鏈接

Cordova 代碼熱更新