Введение в CodePush
Несмотря на то, что в качестве кроссплатформенной среды разработки приложений React Native обеспечивает основу для динамического обновления с точки зрения динамического обновления, технология динамического обновления не так совершенна, как предполагалось. К счастью, Microsoft разработала CodePush, чтобы заполнить пробел в динамических обновлениях приложений React Native.
CodePush — это набор услуг горячего обновления для React Native и Cordova, предоставляемых Microsoft. С помощью CodePush разработчики могут напрямую развертывать обновления мобильных приложений и быстро внедрять горячие обновления кода. Официальный адрес CodePush: https://microsoft.github.io/ код-толчок/.
CodePush действует как центральный репозиторий, куда разработчики могут отправлять обновления в режиме реального времени, а клиентские приложения могут затем запрашивать обновления при запуске приложения. С помощью CodePush можно устранять ошибки и добавлять новые функции без необходимости повторной проверки и установки приложения. CodePush поддерживает следующие функции: • Поддержка развертывания обновлений кода непосредственно для пользователей; • Управление альфа-, бета- и производственными приложениями; • Поддержка горячего обновления кроссплатформенной технологии React Native и Cordova; • Поддержка обновления файлов JavaScript и ресурсов изображений;
Установка CodePush и регистрация аккаунта
Перед использованием CodePush необходимо установить инструмент командной строки CodePush и зарегистрировать учетную запись и приложение CodePush.Команда установки выглядит следующим образом:
npm install -g code-push-cli
После завершения установки вы можете использовать команду code-push -v для проверки. Затем введите команду code-push register в терминале, и откроется страница регистрации, на которой разработчик может выбрать авторизованную учетную запись, как показано на рисунке 11-11.
code-push app add <appName> <platform> react-native
Среди них appName представляет имя приложения, а платформа представляет собой платформу приложения. После ввода команды в терминал можно завершить регистрацию приложения, как показано на рис. 11-13.
Интеграция CodePush SDK
После завершения создания учетной записи CodePush и регистрации приложения следующим шагом будет интеграция CodePush SDK в приложение React Native. Сначала используйте команду react-native init, чтобы создать новый проект React Native следующим образом:
react-native init codepush
Затем установите плагин react-native-code-push.Команда установки выглядит следующим образом:
npm install --save react-native-code-push
Затем запустите команду ссылки, чтобы добавить реагировать нативный кодовый толкающий виджет в проект, следующим образом:
react-native link react-native-code-push
В это время система запросит ключ развертывания для приложений iOS и Android. На этом этапе вы можете ввести промежуточную версию приложения. Если вы не введете, вы можете напрямую нажать кнопку [ВВОД], чтобы пропустить, как показано ниже:
? What is your CodePush deployment key for Android (hit <ENTER> to ignore)
? What is your CodePush deployment key for iOS (hit <ENTER> to ignore)
Если вы забыли ключ развертывания, вы можете проверить его с помощью следующей команды, как показано на рисунке 11-14.
Вручную интегрируйте CodePush SDK
При использовании реактивной ссылки для связывания с собственной библиотекой, если вы пропустите ввод ключа развертывания, вы также можете вручную настроить его на собственной стороне. Для iOS используйте Xcode, чтобы открыть проект iOS в каталоге ios/codepush.xcodeproj, затем выберите проект в PROJECT в представлении навигации Xcode, а затем выберите [Информация] → [Конфигурации] → [Добавить] → [Дублировать выпуск Configuration] , а затем введите ключ Staging, как показано на рисунке 11-15.
include ':react-native-code-push'
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')
Затем свяжите зависимости библиотеки react-native-code-push в файле app/build.gradle следующим образом:
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"
dependencies {
compile project(':react-native-code-push')
}
Затем зарегистрируйте CodePush в методе getPackages() класса MainApplication следующим образом:
@Override
protected String getJSBundleFile() {
return CodePush.getJSBundleFile();
}
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new CodePush(BuildConfig.codepushkey,getApplicationContext(), BuildConfig.DEBUG)
);
}
Поскольку ключ развертывания CodePush разделен на производственную среду и тестовую среду, его можно установить в файле build.gradle следующим образом:
android {
releaseStaging {
buildConfigField "String", "CODEPUSH_KEY", '"<INSERT_STAGING_KEY>"'
}
release {
buildConfigField "String", "CODEPUSH_KEY", '"<INSERT_PRODUCTION_KEY>"'
}
}
}
На этом нативная конфигурация, необходимая для горячего обновления CodePush, завершена, и вам нужно только изменить логику React Native.
Пример горячего обновления iOS-приложения
Используйте Xcode, чтобы открыть файл ios/codepush.xcodeproj, а затем откройте файл AppDelegate.m Вы можете видеть, что код, связанный с jsCodeLocation, выглядит следующим образом:
#if DEBUG
return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
return [CodePush bundleURL];
#endif
}
Как видно из приведенного выше кода, в состоянии, отличном от отладки, адрес загружаемого ресурса системы по умолчанию — это bundleURL CodePush.Чтобы загрузить ресурс пакета CodePush, вам необходимо вручную изменить параметр компиляции на Release. . В частности, откройте меню Xcode, а затем выберите [Продукт] → [Схема] → [Редактировать схему], как показано на рисунке 11-19.
import React, {Component} from 'react';
import {AppRegistry, Platform, StyleSheet, Text, View} from 'react-native';
import {name as appName} from './app.json';
import codePush from 'react-native-code-push'
type Props = {};
export default class App extends Component<Props> {
constructor(props) {
super(props);
this.state = {
message: ''
};
}
componentDidMount() {
codePush.checkForUpdate().then((update) => {
if (update) {
this.setState({message: '有新的更新！'})
} else {
this.setState({message: '已是最新，不需要更新！'})
}
})
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>版本号 1.0</Text>
<Text style={styles.instructions}>{this.state.message}</Text>
</View>
);
}
}
//省略样式文件
AppRegistry.registerComponent(appName, () => codePush(App));
Как показано выше, функция жизненного цикла componentDidMount проверит, нужно ли обновлять приложение CodePush, и, если обнаружит, что обновление требуется, загрузит обновление приложения CodePush. Перекомпилируйте и запустите приложение, результат показан на рис. 11-21.
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>版本号 1.1</Text>
<Text style={styles.instructions}>{this.state.message}</Text>
</View>
);
}
Затем выпустите обновление для iOS с помощью инструмента командной строки Code-Push Release, как показано ниже:
code-push release-react codepush ios
Подождите, пока система упакует и выпустит файл пакета горячего обновления.После успешного выпуска закройте и снова откройте приложение.Вы можете видеть, что приложение запросит обновление при запуске, как показано на рисунке 11-22.