CodePush集成与热更新

2019/6/27 posted in  跨平台开发

前言

CodePush 是微软提供的一套用于热更新 React Native 和 Cordova 应用的服务。
CodePush 是提供给 React Native 和 Cordova 开发者直接部署移动应用更新给用户设备的云服务。CodePush 作为一个中央仓库,开发者可以推送更新 (JS, HTML, CSS and images),应用可以从客户端 SDK 里面查询更新。CodePush 可以让应用有更多的可确定性,也可以让你直接接触用户群。在修复一些小问题和添加新特性的时候,不需要经过二进制打包,可以直接推送代码进行实时更新。

安装与使用

使用CodePush之前首先要安装CodePush客户端。

安装 CodePush CLI

  • 安装客户端npm install -g code-push-cli
  • 查看版本号code-push -v
  • 注册CodePush账号code-push register授权通过之后,CodePush会告诉你“access key”,复制此key到终端即可完成注册。
  • 登录code-push login登陆成功后,你的session文件将会写在 /Users/你的用户名/.code-push.config。

PS.相关命令

  • code-push login 登陆
  • code-push logout 注销
  • code-push access-key ls 列出登陆的token
  • code-push access-key rm <accessKye> 删除某个 access-key

在CodePush服务器注册app

为了让CodePush服务器知道你的app,我们需要向它注册app

  • 添加应用平台code-push app add <app_name> <os> <platform>
  • 添加部署环境code-push deployment add <app_name> test

PS.相关命令

  • code-push app add 在账号里面添加一个新的app
  • code-push app remove 或者 rm 在账号里移除一个app
  • code-push app rename 重命名一个存在app
  • code-push app list 或者 ls 列出账号下面的所有app
  • code-push app transfer 把app的所有权转移到另外一个账号
  • code-push deployment list <app_name> --format json 查看APP的环境信息
  • code-push deployment clear <app-name> 部署环境

发布CodePush更新包

code-push release-react <Appname> <Platform> --t <本更新包面向的旧版本号> --des <本次更新说明>

注意: CodePush默认是更新Staging 环境的,如果发布生产环境的更新包,需要指定--d参数:--d Production,如果发布的是强制更新包,需要加上 --m true强制更新

$ code-push release-react iOSRNHybrid ios --t 1.0.0 --dev false --d Production --des "这是第一个更新包" --m true

  • 发布更新包命令中的 -- t 对应的参数是和我们项目中的版本号一致的,这个不要误理解为是更新包的版本号,例如项目中的版本号为1.0.0, 这时如果我们需要对这个1.0.0 版本的项目进行第一次热更新,那么命令中的 -- t 也为1.0.0,第二次热更新任然为1.0.0, --dev为是否启用开发者模式(默认为false), --d是要发布更新的环境分Production与Staging(默认为Staging);--des为更新说明;--m 是强制更新。
  • 项目的版本号需要改为三位的,默认是两位的,但是CodePush需要三位数的版本号
  • 发布更新应用时,应用的名称必须要和之前注册过的应用名称一致
查询Production

code-push deployment history projectName Production

查询Staging

code-push deployment history projectName Staging

ReactNative集成code-push

安装组件

项目根目录下 yarn add react-native-code-push

添加依赖

react-native react-native-code-push

RN端代码

import CodePush from "react-native-code-push";
let codePushOptions = { checkFrequency: CodePush.CheckFrequency.ON_APP_RESUME };
const deploymentKey = Platform.select({
    ios: 'XgBtruRnRtJKOjkwEZub2Q60mFys4ksvOXqog',
    android: 'fmrp3d8KiGKSyp23cXe26a9xEkHF4ksvOXqog',
});

class App extends Component<Props> {

    componentWillMount() {
        CodePush.disallowRestart();//禁止重启
        this.syncImmediate(); //开始检查更新
    }

    componentDidMount() {
        CodePush.allowRestart();//在加载完了,允许重启
    }

    //如果有更新的提示
    syncImmediate() {
        CodePush.sync( {
                //安装模式
                //ON_NEXT_RESUME 下次恢复到前台时
                //ON_NEXT_RESTART 下一次重启时
                //IMMEDIATE 马上更新
                installMode : CodePush.InstallMode.ON_NEXT_RESUME ,
                //对话框
                updateDialog : {
                    //是否显示更新描述
                    appendReleaseDescription : true ,
                    //更新描述的前缀。 默认为"Description"
                    descriptionPrefix : "更新内容:" ,
                    //强制更新按钮文字,默认为continue
                    mandatoryContinueButtonLabel : "立即更新" ,
                    //强制更新时的信息. 默认为"An update is available that must be installed."
                    mandatoryUpdateMessage : "必须更新后才能使用" ,
                    //非强制更新时,按钮文字,默认为"ignore"
                    optionalIgnoreButtonLabel : '稍后' ,
                    //非强制更新时,确认按钮文字. 默认为"Install"
                    optionalInstallButtonLabel : '后台更新' ,
                    //非强制更新时,检查到更新的消息文本
                    optionalUpdateMessage : '有新版本了,是否更新?' ,
                    //Alert窗口的标题
                    title : '更新提示'
                } ,
                deploymentKey: deploymentKey,
            } ,
        );
    }
}

App = CodePush(codePushOptions)(App);

export default App;
更新是否要求即时

在更新配置中通过指定installMode来决定安装完成的重启时机,亦即更新生效时机

  • codePush.InstallMode.IMMEDIATE :安装完成立即重启更新
  • codePush.InstallMode.ON_NEXT_RESTART :安装完成后会在下次重启后进行更新
  • codePush.InstallMode.ON_NEXT_RESUME :安装完成后会在应用进入后台后重启更新

原生端配置

通过之前的ReactNative添加依赖配置react-native react-native-code-push,原生代码会自动生成。

无需手动配置。

私有化配置

服务端

参照文档进行配置
code-push-server

客户端

  • 登录私有化服务器访问地址,端口号3000,输入账号密码(默认为admin,123456),获取token,登陆之后输入
  • code-push login http://api.code-push.com login后面跟上服务端访问地址
  • Android配置(MyApplication类中getPackages方法中CodePush实例化的时候前面不变,自动从RN端获取deploymentKey,加上第四个参数,私有化服务器的访问地址)
  • iOS配置(info.plist文件中有CodePushDeploymentKeydeploymentKey,再添加一个参数CodePushServerURL,填上私有化服务器的访问地址)