一.安装 CodePush CLI
//目的: 安装完这个就可以直接使用code-push命令
//注意:这个CodePush指令只需要全局安装一次即可,如果第一次安装成功了,那后面就不在需要安装
$ sudo npm install -g code-push-cli
二.注册并登录 CodePush账号
//注册CodePush账号也很简单,同样是只需简单的执行下面的命令,同样这个注册操作也是全局只需要注册一次即可
code-push register
这里会跳进浏览器,可以使用github或者Microsoft帐户注册,注册成功后将会自动登录,生成相应的access token,按照提示在终端输入刚生成的access token,成功则登录.
三.在CodePush服务器注册App
//添加iOS平台应用
$ code-push app add productName-ios ios react-native
//添加Android平台应用
$ code-push app add productName-android android react-native
四.集成code-push到reactNative中
安装yarn
brew install yarn
安装组件
//在项目根目录
$ yarn add react-native-code-push
这样在node_modules中如果出现了react-native-code-push文件夹。接下来编写热更新逻辑
import React, { Component } from 'react';
import {
AppRegistry,
Dimensions,
Image,
StyleSheet,
Text,
TouchableOpacity,
View,
} from 'react-native';
import CodePush from "react-native-code-push";
class App extends Component<{}> {
constructor() {
super();
this.state = { restartAllowed: true };
}
codePushStatusDidChange(syncStatus) {
switch(syncStatus) {
case CodePush.SyncStatus.CHECKING_FOR_UPDATE:
this.setState({ syncMessage: "Checking for update." });
break;
case CodePush.SyncStatus.DOWNLOADING_PACKAGE:
this.setState({ syncMessage: "Downloading package." });
break;
case CodePush.SyncStatus.AWAITING_USER_ACTION:
this.setState({ syncMessage: "Awaiting user action." });
break;
case CodePush.SyncStatus.INSTALLING_UPDATE:
this.setState({ syncMessage: "Installing update." });
break;
case CodePush.SyncStatus.UP_TO_DATE:
this.setState({ syncMessage: "App up to date.", progress: false });
break;
case CodePush.SyncStatus.UPDATE_IGNORED:
this.setState({ syncMessage: "Update cancelled by user.", progress: false });
break;
case CodePush.SyncStatus.UPDATE_INSTALLED:
this.setState({ syncMessage: "Update installed and will be applied on restart.", progress: false });
break;
case CodePush.SyncStatus.UNKNOWN_ERROR:
this.setState({ syncMessage: "An unknown error occurred.", progress: false });
break;
}
}
codePushDownloadDidProgress(progress) {
this.setState({ progress });
}
toggleAllowRestart() {
this.state.restartAllowed
? CodePush.disallowRestart()
: CodePush.allowRestart();
this.setState({ restartAllowed: !this.state.restartAllowed });
}
getUpdateMetadata() {
CodePush.getUpdateMetadata(CodePush.UpdateState.RUNNING)
.then((metadata: LocalPackage) => {
this.setState({ syncMessage: metadata ? JSON.stringify(metadata) : "Running binary version", progress: false });
}, (error: any) => {
this.setState({ syncMessage: "Error: " + error, progress: false });
});
}
/** Update is downloaded silently, and applied on restart (recommended) */
sync() {
CodePush.disallowRestart();
CodePush.sync(
{},
this.codePushStatusDidChange.bind(this),
this.codePushDownloadDidProgress.bind(this)
);
}
/** Update pops a confirmation dialog, and then immediately reboots the app */
syncImmediate() {
CodePush.sync(
{ installMode: CodePush.InstallMode.IMMEDIATE, updateDialog: true },
this.codePushStatusDidChange.bind(this),
this.codePushDownloadDidProgress.bind(this)
);
}
render() {
let progressView;
if (this.state.progress) {
progressView = (
<Text style={styles.messages}>{this.state.progress.receivedBytes} of {this.state.progress.totalBytes} bytes received</Text>
);
}
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to CodePush!
</Text>
<TouchableOpacity onPress={this.sync.bind(this)}>
<Text style={styles.syncButton}>Press for background sync</Text>
</TouchableOpacity>
<TouchableOpacity onPress={this.syncImmediate.bind(this)}>
<Text style={styles.syncButton}>Press for dialog-driven sync</Text>
</TouchableOpacity>
{progressView}
{/*<TouchableOpacity onPress={this.toggleAllowRestart.bind(this)}>*/}
{/*<Text style={styles.restartToggleButton}>Restart { this.state.restartAllowed ? "allowed" : "forbidden"}</Text>*/}
{/*</TouchableOpacity>*/}
<TouchableOpacity onPress={this.getUpdateMetadata.bind(this)}>
<Text style={styles.syncButton}>Press for Update Metadata</Text>
</TouchableOpacity>
<Text style={styles.messages}>{this.state.syncMessage || ""}</Text>
<Text> 123456 </Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
backgroundColor: "white",
paddingTop: 50
},
image: {
margin: 30,
width: Dimensions.get("window").width - 100,
height: 365 * (Dimensions.get("window").width - 100) / 651,
},
messages: {
marginTop: 30,
textAlign: "center",
},
restartToggleButton: {
color: "blue",
fontSize: 17
},
syncButton: {
color: "green",
fontSize: 17
},
welcome: {
fontSize: 20,
textAlign: "center",
margin: 20
},
});
let codePushOptions = { checkFrequency: CodePush.CheckFrequency.MANUAL };
App = CodePush(codePushOptions)(App);
export default App;
五.原生应用中配置CodePush
这里原生应用中配置CodePush我们需要分别配置iOS平台和Android平台
iOS平台
- 查看下之前在code-push创建的app,下面会用到
$ code-push deployment ls <appName> -k
注意这里热更新我们选用release模式
- 将code-push集成到xcode
$ react-native link react-native-code-push
此时在我们的xcode的info.plist中会多出一条CodePushDeploymentKey,在后面加上我们之前获取的release模式下的DeploymentKey
六.打离线包
说明:
1.我们在RN项目根目录下线创建bundle文件夹,再在bundle中创建创建ios和android文件夹,最后将生成的bundle文件和资源文件拖到我们的项目工程中
2.生成bundle命令 react-native bundle --platform 平台 --entry-file 启动文件 --bundle-output 打包js输出文件 --assets-dest 资源输出目录 --dev 是否调试
给个例子?
$ react-native bundle --entry-file index.js --bundle-output ./bundle/ios/main.jsbundle --platform ios --assets-dest ./bundle/ios --dev false
七.发布更新包
将生成的bundle文件上传到CodePush,我们直接执行下面的命令即可
code-push release-react <Appname> <Platform> --t <本更新包面向的旧版本号> --des <本次更新说明>
注意: CodePush默认是更新Staging 环境的,如果发布生产环境的更新包,需要指定--d参数:--d Production,如果发布的是强制更新包,需要加上 --m true强制更新
给个例子?
$ code-push release-react wisdompark-ios ios --t 1.0.1 --dev false --des "这是第一个更新包" --m true
ok,到目前为止热更新部署以及发布就结束了。
八.增量更新
- code-push是支持增量更新的。
- 如我们1.0版本有10张图,2.0版本在1.0版本10张图基础上新增了5张新图,这样2.0版本一共有15张图。这样当我们利用code-push发布2.0版本时候code-push内部服务器会和1.0版本做对比,比较出来了新增了5张新图,这个过程叫做bsdiff(该过程在code-push服务器内部执行),经过bsdiff后生成了新的path包(只有新增的5张图)。当我们的手机下载了这个新增path包后将会和1.0版本的包合并成一个新的完整包。该过程叫做bspatch.(该过程在手机上执行)
- 通过以上介绍我们清楚了code-push服务器经过bsdiff生成了一个新增的小包,在通过手机下载该小包。最后再通过bspath过程生成完整的大包。我们清楚了通过以上过程可以减少app下载的体积,节省时间。这就是增量更新。
九.注意
- RN项目只有在release模式下才可以脱离数据线独立运行,所以我们选择release模式,并且CodePushDeploymentKey也用release模式下的。
- 有时候我们运行终端报错,这时候试试用sudo管理员身份运行试试看,因为有些文件需要以管理员身份才可以有权限写。
扩展
- 自建服务器
//登录
$ code-push login http://服务器IP:3000/
//需要输入默认账号密码为 account: admin password: 123456
- 修改默认密码:
$ curl -X PATCH -H "Authorization: Bearer 登录获取的token" -H "Accept: application/json" -H "Content-Type:application/json" -d '{"oldPassword":"123456","newPassword":"654321"}' http://服务器IP:3000/users/password
- CodePush注册登录相关命令:
code-push login 登陆
code-push logout 注销
code-push access-key ls 列出登陆的token
code-push access-key rm <accessKye> 删除某个 access-key
- CodePush管理App的相关命令:
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的所有权转移到另外一个账号