ionic 配置热更新(cordova-plugin-code-push)

 

前言

• 什么是热更新?热更新就是动态下发代码，它可以使开发者在不发布新版本的情况下，修复 BUG 和发布功能.用户毫无感知，还可以绕过某些应用商店的长时间审核
• ionic实现热更新的插件有好几个,本文以微软公司提供的热更新插件(cordova-plugin-code-push)为例.
• 大公司提供的服务坑少,我在集成的过程中很顺利,只是集成步骤比较多,各位只要认真阅读文档都可以成功

• 苹果App允许使用热更新Apple's developer agreement, 为了不影响用户体验，规定必须使用静默更新。 Google Play不能使用静默更新，必须弹框告知用户App有更新。中国的android市场必须采用静默更新（如果弹框提示，App会被“请上传最新版本的二进制应用包”原因驳回）。

• 还有另外一个热更新的插件，但是已经在2018.09.30宣布不再维护了，可以了解下(cordova-hot-code-push)

安装

// 安装插件
ionic cordova plugin add cordova-plugin-code-push

//安装ionic 适配组件
sudo npm install --save @ionic-native/code-push

//安装插件的命令行组件
sudo npm install -g code-push-cli

//登录热更新以进行更新,创建,发布,等等操作
//登录后会返回一个token复制粘贴到命令行里边登录就可以了
code-push login

//在服务端创建一个APP用来放置更新内容  
//IOS更新
code-push app add appname_ios ios cordova

//android更新
code-push app add appname_android android cordova

 

每创建一个app。会生成两个KEY。一个是生产环境。一个是开发环境。如下图

 

忘记了 可以用下边代码查看

code-push deployment ls appname_android -k

code-push deployment ls appname_ios -k

接着在config.xml配置文件里加上你刚才生成的key。我直接配的就是生产环境的。

<platform name="android">
    <preference name="CodePushDeploymentKey" value="YOUR-ANDROID-DEPLOYMENT-KEY" />
</platform>
<platform name="ios">
    <preference name="CodePushDeploymentKey" value="YOUR-IOS-DEPLOYMENT-KEY" />
</platform>

修改 src/app/app.module.ts (to set CodePush as provider):

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { CodePush } from '@ionic-native/code-push';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    CodePush,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

最后Finally, use the plugin! Modify src/app.component.ts (this basic set up will show an alert to handle updates):

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { HomePage } from '../pages/home/home';

import { CodePush, InstallMode, SyncStatus } from '@ionic-native/code-push';
import { AlertController } from 'ionic-angular/components/alert/alert-controller';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = HomePage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen,
              private codePush: CodePush,  private alertCtrl: AlertController) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
      this.checkCodePush(); //Use the plugin always after platform.ready()
    });
  }

  checkCodePush() {
    
     this.codePush.sync({
      updateDialog: {
       appendReleaseDescription: true,
       descriptionPrefix: "\n\nChange log:\n"   
      },
      installMode: InstallMode.IMMEDIATE
   }).subscribe(
     (data) => {
      console.log('CODE PUSH SUCCESSFUL: ' + data);
      
     },
     (err) => {
      console.log('CODE PUSH ERROR: ' + err);
      
     }
   );
  }

}

编译代码

ionic cordova build ios

然后发布更新代码到服务端

code-push release-cordova appname_ios ios -m --description "ios code push" -d "Production"
code-push release-cordova appname_android android -m --description "android code push" -d "Production"

code-push常用命令

//给app在热更新服务器上创建应用
code-push app add <appName> <os> <platform> 

//删除应用
code-push app rm <appName>

//查看热更新服务器上有哪些应用
code-push app list

//查看应用的发布更新信息
code-push deployment list azmobile_ios

//发布应用
code-push release-cordova <appName> <platform> [options]
 Options参数:
  --deploymentName, -d ..指定部署的类型.默认"Staging",可以选择"Production"或其他  自定义类型
  --description, --des ..添加描述
  --mandatory, -m .......指定此版本是否为强制更新版本
  例1:发布更新
  code-push release-cordova ionic2_tabs_android android --des ""
  例2:部署"Production"状态的更新,即生产环境的热更新部署使用这句命令
  code-push release-cordova ionic2_tabs_android android  -d "Production" --des ""
  注意:一般生产环境的app是压缩过的,所以在发布正式环境热更新之前,先执行"ionic build --prod"压缩代码
  例3:部署ios应用的更新
  code-push release-cordova ionic2_tabs_ios ios --des ""
  例4:添加-m参数强制更新,code-push插件从服务端下载完代码,会立即自动重启app
  code-push release-cordova ionic2_tabs_android android  -m --des ""

//查看部署状态
code-push deployment list <appName>
  例1:
  code-push deployment list ionic2_tabs_android
  例2:查看部署状态及key值,忘记key就这样找
  code-push deployment list ionic2_tabs_android -k

//清空部署记录
code-push deployment clear <appName> <deploymentName>
如:清空Staging状态的部署记录
code-push deployment clear ionic2_tabs_android Staging

//添加部署状态,默认只有"Staging"和"Production"两中状态
code-push deployment add <appName> [deploymentName]

//删除自定义的部署状态
code-push deployment rm <appName> <deploymentName>

这是服务端网站控制台入口   加入下图这些代码。可以用以分析多少人更新和下载了应用。