ionic中使用熱更新外掛cordova-hot-code-push

weixin_33968104發表於2018-04-17

網上有很多關於這方面的資料和說明，但是我並沒有找到一個真正能夠搭建成功的案例。因此為了讓大家別再走彎路，在此我研究了一個上午搭建成功，以此來提高大家的工作效率。
cordova-hot-code-push是一款專門為混合cordova應用開發的一個熱更新外掛，那麼什麼是熱更新？熱更新顧名思義就是，在混合app程式碼（html、js、css）發生改變的時候，我們不需要重新對app打包再次進行釋出，而僅需要通知cordova-hot-code-push外掛，程式碼已經發生了改變，然後cordova-hot-code-push外掛就會根據我們指定的程式碼伺服器進行更新相關的程式碼。這樣的好處在於，客戶再也不用再到相關的app store去下載新版本的app了，只要客戶聯網開啟了app，app就會自動更新相關程式碼。這僅僅是用於程式碼更新上。如果我們所改變的不是程式碼，而是改變了webview或者說升級了ionic2到了ionic3，那麼cordova-hot-code-push還會自動更新嗎？毫無疑問cordova-hot-code-push已經無法再次進行自動更新了，但是它可以向客戶端推送新的app，並強迫使用者下載升級！好了，下面我就用ionic2的專案來說說怎麼搭建cordova-hot-code-push和使用。
本次搭建在OS系統中，服務端使用xampp本地搭建而成，當然windows使用者也不用緊張，因為操作步驟都是一樣的，在windows上你可以使用android模擬器進行測試。

1、首先建立一個ionic專案

當然你得確保你已經安裝了nodejs
安裝ionic和cordova

npm install -g cordova ionic

我根據官方教程，建立一個tabs專案，輸入如下命令

ionic start tab tabs
cd tab
npm install
ionic serve

這樣就建立好了ionic專案了。

2、安裝cordova-hot-code-push外掛（使用全域性安裝）

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

接著在專案根目錄安裝cordova-hot-code-push-plugin外掛

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

3、確定本地伺服器ip地址

比如我安裝的是xampp伺服器軟體，我通過http://localhost可以直接訪問到伺服器根目錄檔案，但是如果我們在模擬器中使用http://localhost和127.0.0.1就無法訪問到伺服器了。因此我們得獲得到本機的ip地址
mac下在終端（命令列）輸入ifconfig即可看到如下畫面，找到你的ip地址：

Mac下檢視ip地址

windows下的朋友可以使用ipconfig命令進行檢視，或者在網路共享中心檢視本機IP地址
得到了Ip地址，那就直接使用ip地址訪問下本地的伺服器，看看能否正常訪問，在瀏覽器中敲入http://192.168.22.62/訪問看看，我的結果是這樣的

xampp本地搭建伺服器

如果你使用的是其他伺服器，請自行進行檢測。

4、建立cordova-hcp.json模板

cordova-hcp.json主要是為了方便我們以後的操作，不用再去修改www目錄下的chcp.json檔案，因此這樣做主要是為了提高工作效率

專案目錄結構

在tab專案根目錄下新建一個cordova-hcp.json檔案，輸入如下內容

{
"autogenerated": true,
"name": "tabs",
"min_native_interface": 1,
"content_url": "http://192.168.22.62/tabs",
"ios_identifier":"https://itues.apple.com/cn/***",
"update": "now"
}

引數
autogenerated 預設為true，自動升級的意思
name app的名稱
min_native_interface 原生殼（可以理解為原生webview版本），此版本由你自己定義版本號
content_url 更新檔案所在伺服器的目錄地址
ios_identifie 這個是ios app store的地址，作為測試，可以忽略，這個地址是打包後提交的地址
update 更新的情況，now|web內容下載完畢即安裝更新；resume|app從後臺切換過來的時候安裝更新；start|app啟動時安裝更新（預設值）.

5、測試模板生成的www/chcp.json檔案是否正確

cd 到專案根目錄，執行下面語句

cordova-hcp build

執行後，就可以到www目錄下找到chcp.json檔案，檢視資訊，發現多了一行程式碼："release": "2017.06.30-15.27.25"，並且也多了一個chcp.manifest的檔案

{
"autogenerated": true,
"name": "tabs",
"min_native_interface": 1,
"content_url": "http://192.168.22.62/tabs",
"ios_identifier": "https://itues.apple.com/cn/***",
"update": "now",
"release": "2017.06.30-15.27.25"
}

其實就是個時間
chcp.manifest則是每一個檔案變動後的hash值，cordova-hot-code-push會去檢測這個值，如果這個值發生了變動則從伺服器下載相關檔案進行更新。
到此，我們的模板完成了。

6、修改根目錄config.xml

在中加入如下程式碼：

config.xml檔案

native-interface version="1"，這裡的1必須和chcp.json中"min_native_interface": 1 是一樣的，這個1代表了外殼（webview版本）版本。做外殼更新用到此引數。

7、在xcode或安卓虛擬機器上執行專案

mac上，輸入如下命令
ionic platform add ios
ionic cordova run ios（舊版本的ionic請執行ionic run ios）
windows上由於實現ios環境難，因此就使用android
ionic platform add android
ionic cordova run android（舊版本的ionic請執行ionic run android）
我執行的結果如下（我之前修改過預設專案的檔案）：

ios下執行ionic專案

8、內殼（html、js、css）熱更新

首先我們修改專案下page/about.html頁面，更它增加一些文字，我這裡增加的是“this is about page”。
執行命令cordova-hcp build重新生成相關的檔案
我們在xampp/htdocs目錄下新建一個資料夾名稱為tabs，接著我們將ionic根目錄下的www內的所有檔案拷貝到xampp/htdocs目錄下。
在xcode或者安卓虛擬機器中將我們的ionic app kill掉，也就是強制退出。
再次開啟我們的app，你會看到about頁面已經發生了變化，剛才我們新增的文字出現了。