Ionic APP 熱更新

 

開門見山，本文主題：cordova-hot-code-push

做用：cordova熱更新插件，提供了在應用程序中對基於Web的內容進行自動更新的功能。

GitHub地址：https://github.com/nordnet/cordova-hot-code-push

 

另一併介紹：cordova-hot-code-push-cli

做用：cordova-hot-code-push插件配套使用的命令行工具。

GitHub地址：https://github.com/nordnet/cordova-hot-code-push-cli

 

使用步驟：

1.安裝cordova-hot-code-push-cli：npm install -g cordova-hot-code-push-cli

說明：此CLI主要用於幫助熱更新插件生成和維護配置文件，例如：chcp.json、chcp.manifest等。

不安裝此CLI也能夠直接使用熱更新插件，但仍是強烈建議你們安裝，詳細內容請前往GitHub瞭解。

 

2.安裝熱更新插件：ionic cordova plugin add cordova-hot-code-push-plugin

說明：首先經過cd命令，進入ionic項目的根目錄下，而後執行插件安裝命令。

 

3.安裝開發插件：ionic cordova plugin add cordova-hot-code-push-local-dev-addon

說明：開發插件不是必需，其主要做用是在熱更新插件的開發和測試階段方便快速構建應用並應用更新的內容，

避免繁瑣的編譯、構建、從新啓動應用等步驟。官方建議在開發階段安裝此插件，以方便咱們進行開發和測試。

注意，在進行應用的發佈時，務必將此插件卸載。

 安裝完成後，可在項目代碼的plugins目錄下看到插件：

 

 4.經過cordova-hot-code-push-cli中的cordova-hcp命令啓動一個server：cordova-hcp server

關於cordova-hcp的其餘命令，請參考：https://github.com/nordnet/cordova-hot-code-push-cli#commands

 

5.將項目打包並安裝到設備，此步驟不詳細描述，拿android舉例，可用的命令是ionic cordova build android或者ionic cordova run android

注意：執行這一步的時候，上面的cordova-hcp server窗口不要關，從新開一個Node.js command prompt窗口來完成你的其餘操做。

由於cordova-hcp server至關於起了一個遠程服務器，來運行你服務器端的程序，後面APP在檢測更新的時候是須要用到此server的。

 

6.項目完成打包並安裝到設備上之後，運行APP。

 

7.接下來就是測試熱更新的時候了，不要眨眼睛~

咱們讓代碼產生一些變化，好比，我修改一下我工程Home Page的html內容：

你切到cordova-hcp server的窗口，你會發現server已經檢測到了程序變化，窗口中會出現相似：

File changed：c:\xxxxxxxxxxxxxxx 的提示文字。包括用戶鏈接，斷開鏈接，都會有提示。

 你再看一下設備上的APP，程序會自動加載最新的內容，

這樣，咱們就在不經過從新編譯打包、安裝（或者是從應用市場下載新版本、安裝）的狀況下，完成了對APP的更新。

這個仍是蠻酷的~~~

 

須要注意的兩個地方，在GitHub的介紹裏是沒有的，你們在測試的時候，請注意一下：

（1）.手機必須聯網，無網絡鏈接的手機是沒法測試熱更新的。我用的是電信4G網絡測試；應該是須要外網，內網我沒有測試。

　　有時間的童鞋也能夠測試一下內網服務器，服務器信息在起服務的時候就能夠看到：

 

 （2）.ionic項目產生變化的時候，咱們要經過ionic serve命令讓Ionic CLI來幫咱們編譯最新代碼到www目錄下。

　　這個也是另一個單獨的窗口來執行，不要停掉cordova-hcp server服務。

　　GitHub在介紹這一部分的時候，只是拿cordova的項目舉例，只是直接修改了www目錄下的index.html文件來測試變化。

　　而咱們使用的是Ionic項目，而且修改的是page裏面是html文件或者ts文件。因此必需要使用ionic serve進行編譯。

 

 Ok。寫到這裏，本篇關於ionic 項目的熱更新測試基本完成。

另外我會單獨寫一篇關於本身搭建服務器來實現熱更新的文章，而不是藉助於cordova-hot-code-push-local-dev-addon插件。

不過本質是差很少的，只不過開發插件幫咱們簡化了一部分複雜的配置過程。

參見：http://www.cnblogs.com/crazyprogrammer/p/7763573.html