Code-Push入门

一、参考资料

1-1.教程:

https://github.com/Microsoft/code-push/tree/master/cli
https://github.com/Microsoft/react-native-code-push
https://github.com/rccoder/blog/issues/27

1-2.自建server:

https://github.com/lisong/code-push-server
https://github.com/lisong/code-push-web

二、简易流程说明

2-1.安装

npm install -g code-push-cli

2-2.注册 CodePush

code-push register

会自动打开浏览器弹出注册界面，注册完成之后会得到一个 token，复制后填写在 Terminal 里面即可。
注册后对应的有登录、登出

code-push login
code-push logout

2-3.注册应用

code-push app add Demo-Android
code-push app add Demo-iOS

每个 APP 都会得到 Production 与 Staging 状态的两个 Key：

Demo-iOS
┌────────────┬──────────────────────────────────────────────────────────────────┐
│ Name       │ Deployment Key                                                   │
├────────────┼──────────────────────────────────────────────────────────────────┤
│ Production │ VzNI1ecFmgN8RWukmmqNZOP2B1t_fd416e98-f637-486e-9c2d-26fc45e04c60 │
├────────────┼──────────────────────────────────────────────────────────────────┤
│ Staging    │ uwuP9LlIuNWonIBzQ3OpRxwHCfQ7fd416e98-f637-486e-9c2d-26fc45e04c60 │
└────────────┴──────────────────────────────────────────────────────────────────┘

Demo-android
┌────────────┬──────────────────────────────────────────────────────────────────┐
│ Name       │ Deployment Key                                                   │
├────────────┼──────────────────────────────────────────────────────────────────┤
│ Production │ ERIHSRO-b2fO8wQbvxpPjeLPoxEjfd416e98-f637-486e-9c2d-26fc45e04c60 │
├────────────┼──────────────────────────────────────────────────────────────────┤
│ Staging    │ iB_a1t69Jx_r2MqH0Z9yecw55kFofd416e98-f637-486e-9c2d-26fc45e04c60 │
└────────────┴──────────────────────────────────────────────────────────────────┘

一个是测试环境、一个是生产环境，当然也可以自定义名称

为什么要注册两个 APP
CodePush 在发布新 bundle 的时候目前只能一个一个平台发，为了保证你的 history 看起来不是那么的乱，建议直接分成两个 APP 处理

2-4.集成SDK

npm install --save react-native-code-push
react-native link react-native-code-push

期间会提示你输入 iOS 和 Android 端的 key，这里输入你用 CodePush 注册 APP 时产生的 key，这里我们先可以都输入每个 Staging 的 key。
如果不幸你忘记了之前产生的 key，可以输入以下的命令查看：

code-push deployment ls WeHIT-Android

2-5.React Native 源码集成

import codePush from "react-native-code-push";

class MyApp extends Component {
}

MyApp = codePush(MyApp);

ES7装饰器

import codePush from "react-native-code-push";

@codePush
class MyApp extends Component {
}

配置

let codePushOptions = { checkFrequency: codePush.CheckFrequency.MANUAL };//出弹窗提示
let codePushOptions = { checkFrequency: codePush.CheckFrequency.ON_APP_RESUME }//自动更新
class MyApp extends Component {
    onButtonPress() {
        codePush.sync({
            updateDialog: true,
            installMode: codePush.InstallMode.IMMEDIATE
        });
    }

    render() {
        return (
            <View>
                <TouchableOpacity onPress={this.onButtonPress}>
                    <Text>Check for updates</Text>
                </TouchableOpacity>
            </View> 
        )
    }
}

MyApp = codePush(codePushOptions)(MyApp);

2-6.发布

code-push release-react <appName> <platform>

2-6-1 一步发布

自动默认打包，在项目根目录执行：

• Android 推包

code-push release-react Demo-Android android

• iOS 推包

code-push release-react Demo-ios ios

2-6-2 两步发布

我们自己打好包，再发布

• 1. 打包
     用你自己的方式打包
• 2. 发布

// code-push release <应用名称> <Bundles所在目录> <对应的应用版本>
--deploymentName 更新环境 staging时不需要这个
--description 更新描述
--mandatory 是否强制更新 默认否
    
code-push release Demo-Android ./bundles 1.0.0 --description “Android Update”
code-push release Demo-iOS ./bundles 1.0.0 --description “iOS Update”

更多的参数的使用可见官方文档

code-push release <appName> <updateContents> <targetBinaryVersion>
[--deploymentName <deploymentName>]
[--description <description>]
[--disabled <disabled>]
[--mandatory]
[--noDuplicateReleaseError]
[--rollout <rolloutPercentage>]
[--privateKeyPath <pathToPrivateKey>]

三、项目特殊业务

3-1 图标的热更新方案

我们项目的图标库之前一直用的是iconfont的字体文件，字体是随着包走的，无法热更新。于是在iOS上的解决方案是让字体动态加载，也就是我们到bundle里获取到字体的路径，再调用原生提供的方法，让原生进行加载。但这个方案在安卓上实现有些困难，目前的方案是把字体调整为svg的方式。