Cordova热更新和App升级 - 简书

原文: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 值作比较 。

  1. 两个值相同 ,不提示升级,但是网页内容可以更新。
  2. 如果大于服务器上的值,不会提醒更新,但是网页内容可以更新。
  3. 小于服务上的值,提示应用需要更新升级,那么热更新将无法正常进行。

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,在使用热更新功能是最好是两个功能都要实现。


补充:
  1. cordova如果网页内容和App升级两个都要实现,请将config.xml配置选项
<auto-download enabled="true" />
<auto-install enabled="true" />
  1. cordova热更新弹出框很难看,android测试为黑色背景绿色文字。网上找了很多的资料,也没能找到解决cordova自带对话框样式的方法。如果有解决的方法请留意一下,谢谢!

相关连接

Cordova 代码热更新

原文地址:https://www.cnblogs.com/lonelyxmas/p/10230978.html

时间: 2024-08-07 10:29:26

Cordova热更新和App升级 - 简书的相关文章

ionic cordova 热更新(引用自www.zyyapp.com/post/116.html)

上篇文章cordova 把html打包成安卓应用 http://www.zyyapp.com/post/115.html cordova 热更新是一个大坑,我看了一天一夜才明白.网上的教程都没说到重点,他们只说了在本地调试,没说发布到自己的服务器,只有一篇说了但是也不详细. 下边就是没有坑的教程,包你顺溜的走完流程. 打开命令提示符 进入工程目录,如果你只能在node.js command prompt 中运行cordova命令,那是因为你没有在系统变量path中添加node.js的路径. 添加

苹果下架4万App就只是因为“热更新”

前去除软件热更新功能,不然有可能下架后,昨日(6 月 22 日),有媒体报道,一周内苹果 App Store 下架了近 4万款中国 App .一种流行观点认为,苹果不是说着玩,而是真对热更新动刀子了. 热更新是一种各大手游等众多 App 常用的更新方式,即用户通过 App Store下载App之后,打开 App 时遇到的即时更新. 2017年6月,AppStore 审核团队确实针对 AppStore 中"热更新"的 App 开发者发送邮件,要求移除所有相关的代码.框架或 SDK,并重新

Cordova 代码热更新 - 简书

原文:Cordova 代码热更新 - 简书 Cordova 代码热更新 [图片上传失败...(image-a19be7-1521624289049)] 基于 Cordova 框架能将网页应用 (js, html, css, 图片等) 打包成 App.当 App 在应用商店上架后,如何快速更新是我们需要考虑的问题.?? 本地打包新版本 App 发布到应用商店,但这中发布流程耗费时间,尤其是 Apple Store 应用加载网络资源,这样 App 展示的内容就可以保证是最新的,但当应用断网时,应用就

RN学习1——前奏,app插件化和热更新的探索

react_native_banner-min.png React Native(以下简称RN)有大量前端开发者的追捧.前端开发是一个活跃的社区,一直尝试着一统前后端,做一个全栈开发,RN就是他们在客户端领域的尝试. 说是从零开始,但其实我还是懂一点点JS代码的,而且算是一个有经验的iOS.Android开发,对很多js和native交互的细节和特性还算了解,在QDaily里面也做过好多hybird的尝试,还经常用JSPatch做hotfix,总的来说,就是对hot update.插件化以及hy

android产品研发(十四)--&gt;App升级与更新

转载请标明出处:一片枫叶的专栏 上一篇文章中我们讲解了android app中的轮训操作,讲解的内容主要包括:我们在App中使用轮训操作的情景,作用以及实现方式等.一般而言我们使用轮训操作都是通过定时任务的形式请求服务器并更新用户界面,轮训操作都有一定的使用生命周期,即在一定的页面中启动轮操作,然后在特定的情况下关闭轮训操作,这点需要我们尤为注意,我们还介绍了使用Timer和Handler实现轮训操作的实例,更多关于App中轮训操作的信息,可参考我的:android产品研发(十三)–>App轮训

【凯子哥带你学Android】Andriod性能优化之列表卡顿——以“简书”APP为例

这几天闲得无聊,就打开手机上的开发者模式里面的"GPU过度绘制"功能,看看别家的App做的咋样,然后很偶然的打开了"简书",然后就被它的过度绘制惊呆了,于是写了这篇性能分析的文章,从一个只有APK文件的角度,说下如何寻找布局中可能存在的性能问题,以及解决方案.本文章以简书Android最新版本1.9.1进行分析. GPU过度绘制 Hierarchy View SysTrace TraceView 总结 分析资源下载 GPU过度绘制 首先打开下面两个功能开关 开发者模

ios app 实现热更新(无需发新版本号实现app加入新功能)

眼下可以实现热更新的方法,总结起来有下面三种 1. 使用FaceBook 的开源框架 reactive native,使用js写原生的ios应用 ios app能够在执行时从server拉取最新的js文件到本地.然后执行,由于js是一门动态的 脚本语言.所以可以在执行时直接读取js文件执行,也因此可以实现ios的热更新 2. 使用lua 脚本.lua脚本如同js 一样,也能在动态时被.之前愤慨的小鸟使用 lua脚本做的一个插件 wax,能够实现使用lua写ios应用.热更新时,从server拉去

项目升级,为了热更新使用lua。

现在发行商的要求越来越变态,必须要求程序热更新,以应对上线后的bug及时调整,我们目标锁定在 ulua, slua,(也对L#感兴趣过),一开始对 ulua 很困惑,unity 的 assetstore 上有售卖,但是又有一个 www.ulua.org 的网站和组织声称最新版本的 ulua 为 1.0.8,后来通过 unity 官方人员知道 ulua.org 是国内的一个组织针对 assetstore 上卖的 ulua 进行升级改造的版本,原版本很久没有更新过,迄今为止是 1.0.3: 做了一个

ios app 实现热更新(无需发新版本实现app添加新功能)

目前能够实现热更新的方法,总结起来有以下三种 1. 使用FaceBook 的开源框架 reactive native,使用js写原生的iOS应用 ios app可以在运行时从服务器拉取最新的js文件到本地,然后执行,因为js是一门动态的 脚本语言,所以可以在运行时直接读取js文件执行,也因此能够实现ios的热更新 2. 使用lua 脚本.lua脚本如同js 一样,也能在动态时被.之前愤怒的小鸟使用 lua脚本做的一个插件 wax,可以实现使用lua写ios应用.热更新时,从服务器拉去lua脚本