使用cordova-app-loader热更新cordova项目

最新推荐文章于 2024-05-01 02:31:02 发布

weixin_33884611

最新推荐文章于 2024-05-01 02:31:02 发布

阅读量268

点赞数

CC 4.0 BY-SA版权

文章标签： json 移动开发 python

原文链接：https://my.oschina.net/u/871551/blog/751173

本文介绍如何使用cordova-app-loader实现Cordova应用的热更新功能，包括搭建文件服务器、配置manifest.json文件、安装必要插件等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

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

转载于:https://my.oschina.net/u/871551/blog/751173