背景

APP在发布后如果有一点点小问题需要改动，需要重新审核发布（此处cue到 APP Store）时需要花费一到两天的时间，那么当改动的仅仅是静态文件时（HTML/CSS/JAVASCRIPT），可不可以仅仅从远端服务器拉取文件替换本地文件，来达到热更新呢？答案一定是可以的，废话继续我们先来了解一下CodePush。

CodePush简介

来看一下官方介绍。

CodePush is a cloud service that enables Cordova and React Native developers to deploy mobile app updates directly to their users’ devices. It works by acting as a central repository that developers can publish updates to (JS, HTML, CSS and images), and that apps can query for updates from (using provided client SDK for Cordova and React Native). This allows you to have a more deterministic and direct engagement model with your userbase, when addressing bugs and/or adding small features that don’t require you to re-build a binary and re-distribute it through the respective app stores.

To get started using CodePush, refer to our documentation, otherwise, read the following steps if you’d like to build/contribute to the project from source.

NOTE: If you need information about code-push management CLI, you can find it in v3.0.1.

我们注重这句话：它使Cordova和React Native开发人员能够将移动应用程序更新直接部署到用户的设备上。

使用CodePush可以使我们在不重新构建和发布程序的前提下，更新一些静态文件（JS,HTML,CSS和图片）。

**注意：本文所写的CodePush技术在2017年后已经被微软整合到 App Center

所以本文可能已经被时代的大浪遗弃了，各位有更好的解决方案，可以留言我。

私有化部署CodePush服务

1.环境准备

运行code-push-server需要node环境和mysql数据库（其他数据库也可以，需要改源码）支持，对于node和mysql就不多做解释了，我们先来安装这两个工具：

因为我本地有node环境，所以没有重新进行安装，需要安装的小伙伴们可以在官网下载安装。

列出我本地的node和npm版本

node v12.18.3
npm 6.14.6
复制代码

mysql数据库使用的版本是：mysql-installer-community-8.0.25.0.msi

2.安装、配置和部署私有化code-push-server

这里的服务端使用源码 github.com/lisong/code…

克隆源码：

$ git clone https://github.com/lisong/code-push-server.git
$ cd code-push-server
复制代码

修改config.js配置文件里数据相关和其他配置。

因为本地安装的mysql数据库版本比项目中客户端所支持的版本高，所以要升级mysql2依赖，修改package.json中mysql2版本为2.2.5。

继续执行命令安装依赖包和运行服务：

$ npm install
$ ./bin/db init --dbname codepush --dbhost localhost --dbuser root --dbpassword 123456 --dbport 3306 #初始化mysql数据库
$ ./bin/www #启动服务 浏览器中打开 http://127.0.0.1:3000 默认登录密码:admin/123456
复制代码

3.安装CodePush CLI 客户端

在本地终端安装CodePush CLI客户端（因为后面需要自己打包上传项目，所以安装在自己开发的电脑上即可）。

这里由于code-push-server版本原因，我们来制定版本2.1.9来安装:

npm install -g code-push-cli@2.1.9
复制代码

使用客户端进行登录：

code-push login http://xxx.xxx.xxx.xxx:3000
复制代码

命令执行会打开浏览器跳转到服务器页面获取token，使用默认admin/123456登录，复制取到的token保存即可。

4.注册APP

为了让CodePush服务知道你的项目，我们需要向它注册APP。
在终端输入code-push add <appname> <os> <platform>,并且appname要加-android或者-ios结尾，然后是平台，最后加上是react-native或者cordova，例如：

code-push app add codepush-ionic-test-android android cordova
复制代码

注册完成之后会返回一套deployment key，分为生成环境Production和Staging，该key在后面客户端几种sdk中会用到。

在项目中集成CodePush SDK

参考文档：ionicframework.com/docs/native…

1.安装code-push cordova插件

ionic cordova plugin add cordova-plugin-code-push
npm install @ionic-native/code-push
复制代码

2.code-push cordova插件配置

在config.xml文件中设置生成的deploymentkey

<platform name="android">
    <preference name="CodePushDeploymentKey" value="YOUR-ANDROID-DEPLOYMENT-KEY" />
    <preference name="codepushserverurl" value="http://xxxx.xxxx.xxxx.xxxx:3000" />
</platform>
<platform name="ios">
    <preference name="CodePushDeploymentKey" value="YOUR-IOS-DEPLOYMENT-KEY" />
    <preference name="codepushserverurl" value="http://xxxx.xxxx.xxxx.xxxx:3000" />
</platform>
复制代码

3.代码集成

修改 src/app/app.module.ts (将CodePush设置为 provider)。

最后，在src/app.component.ts中使用插件：

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);
     }
   );
  }
}
复制代码

发布更新、热部署

IOS：

code-push release codepush-ionic-test-ios ./platforms/ios/www/ 0.0.1 --description "Your awesome change description" -d "Staging"
复制代码

Android

code-push release codepush-ionic-test-android ./platforms/android/app/src/main/assets/www/ 0.0.1 --description "Your awesome change description" -d "Staging"
复制代码

**注意：发布的版本要和线上的一致，否则无法更新

发布后重新启动APP即可看到更新的弹窗提示。

参考文献：

文章版权归作者所有，未经允许请勿转载。

THE END

前端