使用cordova-app-loader熱更新cordova項目

cordova-app-loader是什麼？

cordova-app-loader是一個用來熱更新的cordova手機應用的一個項目，它經過部署一個文件服務器來遠程更新安裝在用戶手機上的cordova手機應用，而沒必要提交到apple store從新審覈和分發到各個android市場，這也是cordova程序的優點所在。

cordova-app-loader如何遠程更新？

首先大體瀏覽一下cordova-app-loader的項目主頁，主要分紅三個步驟：1.檢查  2.下載  3.更新。

1.檢查：經過比較打包在手機程序裏的manifest.json文件和服務器上的manifest.json文件，若是服務器上的文件有過修改，那就和手機上的文件不一致了，這時候手機應用更新manifest.json到loacalStorage裏面，以便下次比較。若是兩個json文件一致，那就不作任何操做。

2.下載：經過指定的文件服務器（server），cordova應用將按照manifest.json文件的差別下載對應的js、css或者其餘文件文件下載一個指定的目錄（localRoot）下面。

3.更新：完成數據下載以後，新的數據更新到cordova應用中，cordova應用自動reload，以後完成本次更新。

具體的操做

假定你已經安裝了nodejs和cordova，首先建立一個cordova應用AppLoaderTest，添加platform：android

給AppLoaderTest項目添加三個插件，項目主頁裏面寫的插件名稱，可能已經變了

cordova plugin add cordova-plugin-file
cordova plugin add cordova-plugin-file-transfer
cordova plugin add cordova-plugin-whitelist

給項目根目錄下的config.xml添加兩行配置

<access origin="cdvfile://*" />
<allow-intent href="cdvfile://*" />

要熱更新，首先得有一個文件服務器，這裏用nodejs的Express搭建一個簡單的服務器，把服務器的靜態文件目錄設置爲AppLoaderTest項目的www目錄，端口爲3000，啓動。下載bootstrap.js、autoupdate.js和cordova-app-loader-complete.js文件到www目錄下，這裏存在一個bug，詳見issues#108，解決辦法在這裏，這裏咱們只須要打開cordova-app-loader-complete.js，註釋掉498行，添加修改後的代碼。

// onSingleDownloadProgress(new ProgressEvent());
if(onSingleDownloadProgress) onSingleDownloadProgress(new ProgressEvent());

www目錄下index.html是cordova的入口文件，添加bootstrap.js，其中的server就是剛纔啓動的服務器

<script type="text/javascript"
                server="http://192.168.1.200:3000/"
                timeout="5100"
                manifest="manifest.json"
                src="bootstrap.js"></script>

在www目錄下添加一個app.js文件，往裏面添加一行代碼

window.BOOTSTRAP_OK = true;

再在www目錄下添加manifest.json文件，而後配置你要更新的文件

{
  "files": {
    "cordova-app-loader-complete": {
      "version": "bd120274cd89d31a3208999bce21a82738acc6e8",
      "filename": "cordova-app-loader-complete.js"
    },
    "autoupdate": {
      "version": "8edd3260572a1ac4c1d0c1c1214047f14a1e7836",
      "filename": "autoupdate.js"
    },
    "app": {
      "version": "891ba44eda8c13ae0fca376b61e22d7e766e2952",
      "filename": "app.js"
    }
  },
  "load": [
    "cordova-app-loader-complete.js",
    "autoupdate.js",
    "app.js"
  ],
  "version": "770a5bffad23c5103216e743a5d7bd22cf15929c"
}

先別管裏面的version，由於立刻要更新這個文件

在項目中安裝一個nodejs模塊cordova-app-loader

npm install cordova-app-loader

而後執行更新操做

node node_modules/cordova-app-loader/bin/update-manifest www www/manifest.json

這時候manifest.json文件已經更新了，其中的version就是每一個文件的哈希值

{
  "files": {
    "cordova-app-loader-complete": {
      "version": "25ac7c0b8724244ee0eeae65f6f03c87b911c1b0",
      "filename": "cordova-app-loader-complete.js"
    },
    "autoupdate": {
      "version": "d86f9184792ae85f9a40f26792ee30d4d268b0b4",
      "filename": "autoupdate.js"
    },
    "app": {
      "version": "21fb0b01a9fc0b2db810392f0b70740d68a43576",
      "filename": "app.js"
    }
  },
  "load": [
    "cordova-app-loader-complete.js",
    "autoupdate.js",
    "app.js"
  ],
  "version": "96410648766c686dac676473399b19214eafa7dc"
}

好了，這是已經能夠打包了，執行狀況和以前沒什麼區別，可是cordova應用更新工做已經準備好了

如今，咱們要往www/js/index.js最後一行添加一個alert

alert("cordova-app-loader success");

而後修改manifest.json文件

{
  "files": {
    "cordova-app-loader-complete": {
      "version": "25ac7c0b8724244ee0eeae65f6f03c87b911c1b0",
      "filename": "cordova-app-loader-complete.js"
    },
    "autoupdate": {
      "version": "fa5568ae2599cf2ea8e47a5d8989ebf3685d84c1",
      "filename": "autoupdate.js"
    },
    "app": {
      "version": "21fb0b01a9fc0b2db810392f0b70740d68a43576",
      "filename": "app.js"
    },
    "index": {
      "version": "21fb0b01a9fc0b2db810392f0b70740d68a43576",
      "filename": "js/index.js"
    }
  },
  "load": [
    "cordova-app-loader-complete.js",
    "autoupdate.js",
    "app.js",
    "js/index.js"
  ],
  "version": "e11152fedd61b14f5ef2888fb2d303b5b8a7d484"
}

再次執行更新manifest.json的操做

node node_modules/cordova-app-loader/bin/update-manifest www www/manifest.json

manifest.json再次更新

{
  "files": {
    "cordova-app-loader-complete": {
      "version": "25ac7c0b8724244ee0eeae65f6f03c87b911c1b0",
      "filename": "cordova-app-loader-complete.js"
    },
    "autoupdate": {
      "version": "d86f9184792ae85f9a40f26792ee30d4d268b0b4",
      "filename": "autoupdate.js"
    },
    "app": {
      "version": "21fb0b01a9fc0b2db810392f0b70740d68a43576",
      "filename": "app.js"
    },
    "index": {
      "version": "c510a5c3cd37b728046ac4badbcb6cde4691fa27",
      "filename": "js/index.js"
    }
  },
  "load": [
    "cordova-app-loader-complete.js",
    "autoupdate.js",
    "app.js",
    "js/index.js"
  ],
  "version": "22648ea546693076b2ba50e7bb1841b1e4967969"
}

這時候無論是退出從新進入app仍是按Home鍵再回來，cordova-app-loader都回執行檢查，若是manifest.json有變化就下載更新。