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

梦里梦外; 2023-03-13 11:50 5阅读 0赞

# #

## 前言 ##

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

*  苹果App允许使用热更新[Apple's developer agreement][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。一个是生产环境。一个是开发环境。如下图 ###

![format_png][]

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

code-push deployment ls appname_android -k
    
    code-push deployment ls appname_ios -k

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

修改 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>

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NhbXJ0aWFu_size_16_color_FFFFFF_t_70][]

[cordova-plugin-code-push]: https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2FMicrosoft%2Fcordova-plugin-code-push
[Apple_s developer agreement]: https://developer.apple.com/programs/ios/information
[cordova-hot-code-push]: https://github.com/nordnet/cordova-hot-code-push
[format_png]: /images/20230312/97ff5020d24e417f957010018f9dbba6.png
[Link 1]: https://appcenter.ms/apps
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NhbXJ0aWFu_size_16_color_FFFFFF_t_70]: /images/20230312/d9ff5dd41d3548e2af4e02574932964a.png