CodePush — это облачный сервис App Center, который позволяет разработчикам React Native развертывать обновления мобильных приложений непосредственно на устройствах своих пользователей, что очень полезно для настройки пользовательского интерфейса или исправления ошибок. Здесь мы предоставляем пошаговое руководство по интеграции CodePush в проект React Native на iOS.

1. Создайте приложение в App Center и включите CodePush:

Чтобы использовать CodePush, у вас должна быть учетная запись App Center. Если у вас уже есть учетная запись, перейдите в Центр приложений, нажмите кнопку Добавить новую в правом верхнем углу и выберите Добавить новую. приложение».

Заполните имя приложения, тип выпуска (не обязательно), ОС (iOS) и платформу (React Native). Затем перейдите на домашнюю страницу вашего приложения, которое вы только что создали, и вы найдете «CodePush» в разделе «Распространить» в левом меню.

Нажмите «Создать стандартные развертывания», чтобы создать развертывания.

2. Установите code-push-cli и CodePush SDK для React Native:

Установка code-push-cli на Mac:

npm install -g code-push-cli

Чтобы установить React Native CodePush SDK в каталоге вашего проекта React Native:

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

Примечание: здесь, в этом примере, мы используем React Native 0.62. Если вы используете другую версию, пожалуйста, проверьте официальный документ для получения дополнительных инструкций.

3. Настройте react-native-code-push для iOS:

  • Запустите cd ios && pod install && cd .., чтобы установить все необходимые зависимости CocoaPods.
  • Откройте файл AppDelegate.m и добавьте оператор импорта для заголовков CodePush:
#import <CodePush/CodePush.h>
  • Найдите следующую строку кода, которая задает исходный URL-адрес моста для рабочих выпусков:
return [[NSBundle mainBundle] URLForResource:@”main” withExtension:@”jsbundle”];

Замените его этой строкой:

return [CodePush bundleURL];
  • Добавьте ключ развертывания в Info.plist:

Чтобы найти ключ развертывания, запустите:

code-push deployment ls <Your-App-Name> -k

откройте файл Info.plist вашего приложения и добавьте новую запись с именем CodePushDeploymentKey, значение которой является ключом развертывания, для которого вы хотите настроить это приложение.

4. Используйте CodePush React Native SDK в своем приложении:

Самый простой способ — обернуть корневой компонент компонентом более высокого порядка codePush следующим образом:

import codePush from “react-native-code-push”; 
class App extends Component { 
 ...
}
App = codePush(App);
export default App

Это минимальный пример использования CodePush. По умолчанию ваше приложение автоматически загружает доступные обновления и применяет их при следующем перезапуске приложения.

Наконец, выпустите свои обновления для CodePush:

code-push release-react <Your-App-Name> ios

Параметры: настройка поведения при обновлении

Есть несколько вариантов для вас, чтобы решить, когда проверить обновление и установить его для лучшего взаимодействия с пользователем, здесь я перечислил некоторые варианты из документов:

  • Тихая синхронизация при запуске приложения (самое простое поведение по умолчанию). Ваше приложение автоматически загрузит доступные обновления и применит их при следующем перезапуске приложения (например, ОС или конечный пользователь отключили его, или устройство было перезапущено). Таким образом, весь процесс обновления является «бесшумным» для конечного пользователя, поскольку он не видит никаких запросов на обновление и/или «синтетических» перезапусков приложения.
  • Тихая синхронизация при каждом возобновлении работы приложения. То же, что и предыдущий, за исключением того, что мы проверяем наличие обновлений или применяем обновление, если оно существует, каждый раз, когда приложение возвращается на передний план после «фонового режима».
class App extends Component {
}
App = codePush({ checkFrequency: 
  codePush.CheckFrequency.ON_APP_RESUME, installMode:   
  codePush.InstallMode.ON_NEXT_RESUME })(App);
export default App;
  • Интерактивный. Когда обновление доступно, запросите у конечного пользователя разрешение перед его загрузкой, а затем немедленно примените обновление. Если бы обновление было выпущено с использованием флага mandatory, конечный пользователь все равно был бы уведомлен об обновлении, но у него не было бы выбора игнорировать его.
// Active update, which lets the end user know
// about each update, and displays it to them
// immediately after downloading it
class App extends Component {
}
App = codePush({ updateDialog: true, installMode: codePush.InstallMode.IMMEDIATE })(App);
export default App;
  • Журнал/отображение прогресса. Пока приложение синхронизируется с сервером для получения обновлений, используйте обработчики событий codePushStatusDidChange и/или codePushDownloadDidProgress, чтобы регистрировать различные этапы этого процесса или даже показывать пользователю индикатор выполнения.
// Make use of the event hooks to keep track of
// the different stages of the sync process.
class App extends Component {
 codePushStatusDidChange(status) {
 switch(status) {
   case codePush.SyncStatus.CHECKING_FOR_UPDATE:
     console.log(“Checking for updates.”);
   break;
   case codePush.SyncStatus.DOWNLOADING_PACKAGE:
     console.log(“Downloading package.”);
   break;
   case codePush.SyncStatus.INSTALLING_UPDATE:
     console.log(“Installing update.”);
   break;
   case codePush.SyncStatus.UP_TO_DATE:
     console.log(“Up-to-date.”);
   break;
   case codePush.SyncStatus.UPDATE_INSTALLED:
     console.log(“Update installed.”);
   break;
  }
 }
codePushDownloadDidProgress(progress) {
   console.log(progress.receivedBytes + “ of “ + progress.totalBytes     + “ received.”);
 }
}
App = codePush(App);
export default App;