Ionic - 熱更新

Ionic3開發時，經常會遇到需要頻繁改動打包，如果這時候可以熱更新整個APP的變動文件，那麼就像web應用一樣，在APP熱更新。

本文是使用了 Cordova-hot-code-push 插件去進行對一個打包編譯後的靜態文件進行加工，部署到服務器的一個過程。

 

進入正題

一、 熱更新流程

1. 編譯應用成功後，熱更新插件對每一個變動的文件生成hashcode

 

2. 將生成後的整個資源目錄部署在服務器上

 

3. 部署成功後，客戶端（主動/被動）檢測是否有熱更新，是否要進行升級、更新文件（檢測hashcode、版本）

 

二、開始使用

現階段已建立在已有可打包正常使用的應用爲前提

1. 安裝 Cordova-hot-code-push

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

 

2. 本地全局安裝熱更新構建環境

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

 

3. 本地打包

ionic build --release --aot --minifyjs --minifycss

 

4. 熱更新構建

cordova-hcp build

  成功構建後,能在根目錄的www文件裏看多chcp文件,這就是熱更新生成的

 

5. 修改部分文件的配置

config.xml 增加chcp配置

根目錄cordova-hcp.json文件(若沒有就新建一個)

配置此文件後,每次進行熱更新構建後就不用手動去修改www文件裏面的變動

{
    "content_url": "XXXXXXXXXXXX",
    "autogenerated": true,
    "update": "now",
    "min_native_interface": "1.3.3"
}

 

6. 若在配置文件中,設置的是手動更新,則需要在代碼中進行控制

核心的更新代碼

fetchCHCP(v) {//開始熱更新
    this.httpService.showLoading()
    chcp.fetchUpdate((error, data) => {
      // 表示沒有更新版本，或者其他錯誤，詳情的信息參考上面的chcp error鏈接
      if (error) {
        this.httpService.showToast(`ErrorLog:${error.description} - ${error.code}`);
        this.httpService.showLoading().dismissAll()
        return;
      } else {
        // 這次更新的版本信息
        this.httpService.showToast(`UpdateTime:${JSON.stringify(data.release)}`);
        //開始安裝
        chcp.installUpdate((error) => {
          if (error) {
            // 更新失敗
            this.httpService.showToast('更新失敗,錯誤代碼:' + error.code + ',' + error.description);
          } else {
            // 更新成功
            this.httpService.showToast('Update installed!');
          }
        });
        this.httpService.showLoading().dismissAll()
      }
    });
  }

 

7. 部署上服務器

把整個www目錄放上服務器,路徑爲剛剛配置文件裏 content_url 的指向路徑

 

三、延伸

使用熱更新的初始目的就是方便開發，方便用戶。

方便用戶的方面，可以在配置文件中設置自動更新，條件更新等等，也可以根據角色更新，玩法很多。

方便開發的方面，等於說是偷懶，也等於說是效率高。如何幹最少的事做出一樣的東西。

本文只提供基礎思路，做法可以自行研究

 

1. 配置package.json文件

增加兩個命令，在生成時少打一些，也方便記憶

PS 提一下，沒有使用prod打包，而使用了AOT+minify編譯，編譯結果大相徑庭，而prod的打包時間過長，則使用圖中的命令

更多的可以看我文章裏

 

2. 部署過程

正常部署是手動連接FTP服務器，再複製黏貼上去

但是我連這一步也想偷懶，那就應用CICD的理念

自動構建部署 Jenkins

本地構建後，提交帶代碼倉庫，再到Jenkins上去點一下按鈕構建，就成功部署了~