CodePush 是提供給 React Native 和 Cordova 開發者直接部署移動應用更新給用戶設備的云服務。CodePush 作為一個中央倉庫,開發者可以推送更新到 (JS, HTML, CSS and images),應用可以從客戶端 SDKs 里面查詢更新。CodePush 可以讓應用有更多的可確定性,也可以讓你直接接觸用戶群。在修復一些小問題和添加新特性的時候,不需要經過二進制打包,可以直接推送代碼進行實時更新。
CodePush 可以進行實時的推送代碼更新:
*直接對用戶部署代碼更新
*管理 Alpha,Beta 和生產環境應用
*支持 Cordova 和 React Native
官方對Code-push的介紹
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 certain updates to (e.g. JS, HTML, CSS and image changes), and that apps can query for updates from (using our provided client SDKs). This allows you to have a more deterministic and direct engagement model with your end-users, while addressing bugs and/or adding small features that don’t require you to re-build a binary and/or re-distribute it through any public app stores.
一、環境準備
1.安裝Code-push cli
$ npm install -g code-push-cli
2、 注冊CodePush賬戶
$ code-push register
執行以上命令將會自動打開如下圖所示的注冊頁面:
本文使用GitHub賬戶進行注冊,注冊成功后將會生成如下圖所示相應的access token:
在終端輸入剛生成的access token:
3、添加CodePush應用
$ code-push app add XXX ? ? ? ? ? ? ?//xxx ? 為你要熱部署的app name
4、查看應用?
成功后我們可以看到有兩個發布鍵值。一個Production是對應生產環境的,二Staging是對應開發環境的。這個值在后面我們集成工程里面要用到。
二、集成code-push 到工程文件
在項目工程安裝CodePush,一般有兩三種方法。
一種是cocoaPods接入,一種是手動接入,本文采用的是手動接入。
1、cocoaPods?
// 新增
pod'CodePush', :path =>'./node_modules/react-native-code-push'
// 安裝
pod install
2、手動接入?
1) 在命令行下,進入整個工程的根目錄,安裝CodePush。
npm install"react-native-code-push"--save
2)引入工程 ?
此處有兩種方法 :
a.
將react-native-code-push文件夾中?CodePush.xcodeproj?直接拉入項目中Libraries中
將
Libraries/CodePush.xcodeproj/Products
中的
libCodePush.a
直接拖入 Link Binary With Libraries中
點擊Link Binary With Libraries的加號,選擇
libz.tbd
加入
在Build Settings的Header Search Paths那一項中加入
$(SRCROOT)/../node_modules/react-native-code-push
當然上面是一種蠢方法。[doge],下面是便捷的一鍵做法。
b npm install 安裝以后?
直接使用rnpm神器?
安裝?
$ npm -g install rnpm xcode
使用?
rnpm link
然后就省略了a步驟那么多步操作,是不是很簡單,一步步按a做完的,看到這是不是很想打人。 哈哈。
三 修改oc代碼
1.在加載 js bundle的類中 修改代碼
#import"CodePush.h"
NSURL *jsCodeLocation;
#ifdef DEBUG
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
#else
jsCodeLocation = [CodePush bundleURL];
#endif
2.修改info.plist 添加CodePushDeploymentKey鍵值對,Deployment Key可以通過以下命令進行獲取:(還可以獲取熱部署后,包更新的詳情)。
$ code-push deployment ls <appname> --displayKeys
添加后如圖?
并在
Info.plist
中將
Bundle versions string, short
的值修改為
1.0.0 (三位 務必三位 否則codepush 會出錯)
3.React Native項目的入口文件,做如下修改:
在需要啟動代碼更新的位置里面,引用CodePush,并且調用Code Push的更新接口。
一般在componentDidMount()調用。
四、發布更新?
1)發布更新 (JavaScript-only)
當你修改js文件的時候,并且想立刻發布。則僅僅需要以下的操作:
將你修改的js文件(當前文件是index.ios.js)打包為二進制文件,放入指定的地方(當前位置為根目錄)。
?react-native bundle --platform ios --entry-file index.ios.js --bundle-output codepush.js --dev false
將二進制文件push到staging 環境中
code-push release?[--deploymentName ]?[--description ] ?[--mandatory]
eg:
code-push release AwesomeProject2? codepush.js 1.0.0
2)發布更新 (JavaScript + images)
–assets-dest 就是你放圖片的位置(當前僅僅是做測試,實際上最好建個文件夾專門存入相關圖片)
react-native bundle --platform ios --entry-file index.ios.js --bundle-output ./main.jsbundle --assets-dest ./<img 地址>
// main.jsbundle 為自定義名字的bundle名
push bundle文件
code-push <release/debug> <projectName(與注冊的app同名)><bundle文件名> <版本號>
eg:
code-push release AwesomeProject2? main.jsbundle 1.0.0
Q&A
1.更新規則?
2.更新后都需要重啟才能看到最新的變化 再次進入后要等一會。TODO:還要驗證后確定穩定時機。
3.查看歷史上傳過的版本:
code-push deployment history 你注冊的appname Staging