cordova熱更新和App升級
公司的cordova專案前段時間增加了熱更新功能，自己第一次做的時候在網上查找了很多資料，有的資料寫的並不全面遇到了很多坑。因此總結一些在開發過程中遇到了問題和解決辦法。
cordova專案熱更新分為兩個部分，網頁內容（web content)更新和Cordova外掛(native side)更新。前者是網頁內容，後者是 cordova 外掛。web content 的執行是基於 native side。如:登入頁面的微信登入，需要在專案中整合微信的外掛才能實現登入。
web程式碼的更新
此更新方式，只需要更新web前段程式碼，不需要更新android的原生程式碼。只是對js、html等的更新。
1、新增外掛Cordova Hot Code Push
cordova plugin add cordova-hot-code-push-plugin 複製程式碼
2、新增熱更新工具cordova-hot-code-push-cli
npm install -g cordova-hot-code-push-cli 複製程式碼
3、新增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這個值執行命令後是沒有的需要自己手動新增，如果不新增網頁內容更新將會無效。
4、在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內容的更新。（必需） 複製程式碼
5、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 的版本號
6、將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升級）因此還需要下面的配置。
1、config.xml 配置中定義native side 版本號
<chcp> <native-interface version="5" /> </chcp> 複製程式碼
此配置會與伺服器上配置檔案 chcp.json 中的min_native_interface 值作比較 。
-
兩個值相同 ，不提示升級，但是網頁內容可以更新。
-
如果大於伺服器上的值，不會提醒更新，但是網頁內容可以更新。
-
小於服務上的值，提示應用需要更新升級，那麼熱更新將無法正常進行。
2、新增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，在使用熱更新功能是最好是兩個功能都要實現。
補充：
- cordova如果網頁內容和App升級兩個都要實現，請將config.xml配置選項
<auto-download enabled="true" /> <auto-install enabled="true" /> 複製程式碼
- cordova熱更新彈出框很難看，android測試為黑色背景綠色文字。網上找了很多的資料，也沒能找到解決cordova自帶對話方塊樣式的方法。如果有解決的方法請留意一下，謝謝！