使用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有变化就下载更新。