Эта статья не об установке CodePush или о том, как его использовать. Вы всегда можете обратиться к документации по адресу: https://learn.microsoft.com/en-us/appcenter/distribution/codepush/rn-overview.

Когда дело доходит до выбора мобильной кросс-платформы для вашего следующего проекта сегодня, вы, вероятно, сузитесь до выбора React Native или Flutter. Обычно я придерживаюсь обоих лагерей и стараюсь не придерживаться только одного, но должен сказать, что у меня больше симпатии к React Native. И одна из главных причин этого, как мне кажется, и у многих других: CodePush!

Для тех, кто не знает, CodePush позволяет отправлять горячие обновления (или обновления по воздуху, если хотите), которые не обязательно проверять в App Store или Google Play Store. . Это особенно полезно, если вы работаете над проектом, который требует большого количества изменений за короткое время, например, над приложениями для электронной коммерции. Вы просто исправляете или вводите новую функцию в свой бизнес приложений, затем отправляете обновление, и все. Ваши пользователи получают его немедленно, как если бы это был веб-сайт.

Согласно документации, после установки библиотеки вы просто обертываете свой входной компонент, которым обычно является App.js, и все готово. Даже если этого достаточно, чтобы заставить его работать, вы можете изменить способ получения пользователями обновлений, чтобы сделать ваше приложение более удобным для пользователей.

Но зачем нам его менять? Ну, на самом деле вы не должны. Если вы выполняете базовую установку, люди получат обновления при следующем перезапуске, а если это срочное обновление, вы всегда можете пометить его как «немедленное» на панели инструментов App Center, и пользователи получат его немедленно.

Однако это мгновенное обновление приводит к тому, что ваши пользователи неправильно истолковывают поведение вашего приложения, поскольку оно перезапустится внезапно, как только получит обновление. В моих прошлых проектах пользователи сообщали мне об этом поведении как об «ошибке», но я все же понял, что это плохо для UX, поэтому я решил изменить это.

Во-первых, я думаю, что пользователи, особенно пользователи мобильных приложений, не приветствуют что-то неожиданное. В каждом взаимодействии или функции приложения они ожидают чего-то знакомого, что кажется им значимым. Итак, прежде всего, мы собираемся добавить модальное окно, которое предупреждает пользователей о наличии доступного обновления, чтобы они были в курсе, что происходит. CodePush имеет параметры updateDialog, которые вы можете указать при переносе компонента, как показано ниже:

Этот параметр отображает встроенное предупреждение, когда доступно обновление, чтобы ваши пользователи знали, что их ожидает обновление. Заголовок, текст и кнопки на английском языке, но параметр updateDialog также принимает объект, в котором вы можете их настроить. Вот полный пример на немецком языке:

Диалог немного меняется в зависимости от типа обновления. Для стандартного обновления вы можете закрыть диалоговое окно и выбрать установку позже, в то время как обязательное обновление не оставляет вам другого выбора, кроме установки.

Хотя мы информировали пользователей об обновлении, показывая всплывающее окно, нам также нужно показать какой-то индикатор прогресса во время его загрузки. Это гарантирует, что мы действительно получаем обновление или нет. В CodePush нет встроенного прогресса, поэтому нам нужно сделать его с нуля.

CodePush предоставляет несколько событий об этапах обновления, а также о байтах, переданных во время обновления, например:

Здесь у нас есть события codePushStatusDidChange и codePushStatusDidChange, которые в основном позволяют нам достичь того, чего мы хотим. Я знаю, что это компонент класса и функции класса, а ваш App.js, вероятно, является функциональным компонентом. Вы не можете смешивать эти два метода, но всегда можете использовать метод codePush.sync, как описано здесь https://learn.microsoft.com/en-us/appcenter/distribution/codepush/rn -api-ref#codepushsync. Обратите внимание, что некоторые пользователи столкнулись с тем, что статусы, предоставленные таким образом, могут работать не так, как ожидалось.

Теперь для ясности остановимся на функциях класса и создадим отдельный компонент только для CodePush. Я также хочу, чтобы в нижней части приложения появлялась крошечная полоса индикатора выполнения, и при загрузке она читалась как «Загружено, перезапуск…» и перезапускала приложение с примененным обновлением. Для этого нам нужно вручную управлять процессом. Давайте посмотрим:

Это много кода. Давайте разберем его;

Сначала мы определяем 2 переменные, stat и downloadProgress. Переменная stat в основном отвечает за каждое изменение макета в нашем компоненте, включая включение/выключение нашего модального окна. С другой стороны, downloadProgress необходим для нашего индикатора выполнения. Вы можете отображать проценты, если хотите, но, на мой взгляд, в этом нет необходимости, если у вас есть какое-то визуальное представление.

Затем у нас есть базовый макет. У нас есть модальное представление и представление-оболочка, к которым я применил Layout Animation из react-native-reanimated для создания эффекта сжатия для предстоящего текста внутри.

Мы используем 2 события CodePush, Downloading и Installed, остальные предназначены только для регистрации. Мы также хотим перезапустить приложение вручную, поэтому в параметрах CodePush я изменил installModes на следующий перезапуск приложения. Одна важная вещь, которую вы, возможно, заметили, нам нужно обернуть этот компонент с помощью codePush вместо App.js, поэтому вам придется развернуть ваше приложение, если вы сделали это ранее.

Еще кое-что; CodePush работает и в среде разработки. и это может быть не то, что вы хотите. Если вы хотите избежать получения обновлений во время работы на симуляторе или чем-то еще, вы можете отредактировать нижнюю часть, как показано ниже:

export default codePush({
checkFrequency: __DEV__ ? codePush.CheckFrequency.MANUAL : codePush.CheckFrequency.ON_APP_RESUME,
installMode: codePush.InstallMode.ON_NEXT_RESTART,
mandatoryInstallMode: codePush.InstallMode.ON_NEXT_RESTART,
updateDialog: true,
})(CodePushManager);

Наконец, нам нужно поместить компонент в App.js, желательно вне всех компонентов Provider, например:

Вот и все! У нас есть хороший прелоадер для обновлений CodePush. Вы всегда можете поэкспериментировать с различными настройками и изменить различные режимы обновления и установки, чтобы они лучше всего подходили для вашего проекта.

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

Удачного кодирования!