Швидка доставка оновлень React Native: Hot Code Push (CodePush)
Уявіть: ви знайшли критичний баг у продакшні — розрахунок знижки округлює не туди. Виправлення готове, але щоб потрапити до користувачів, потрібно пройти рев'ю App Store, яке триває від 24 годин до тижня. Кожна година простою — втрачені гроші та нерви. CodePush вирішує проблему: JavaScript-бандл та ресурси оновлюються напряму, минаючи магазини. Ми впроваджуємо CodePush у React Native-додатки, гарантуючи коректне налаштування, безпечний rollout та rollback на випадок помилок.
Як CodePush оминає рев'ю магазинів?
React Native додаток складається з нативного хоста (Objective-C/Swift / Java/Kotlin) та JS-бандла. CodePush замінює JS-бандл та ресурси (images/, fonts/) без зміни нативного коду. Apple та Google дозволяють такі оновлення — за умови, що оновлення не змінює поведінку додатка принципово (не можна через JS додати нові native permissions або змінити модель розповсюдження). Наш досвід показує, що правильне налаштування CodePush економить командам тижні часу на доставці фіксів.
Чому варто обрати CodePush замість звичайного оновлення?
Порівняйте: стандартне оновлення через App Store займає 1–3 дні, а CodePush доставляє патч за хвилини. Різниця в десятки разів — CodePush у 100 разів швидше. Крім того, CodePush дозволяє тестувати оновлення на невеликій групі користувачів перед повним rollout. Це знижує ризик регресій.
| Критерій | App Store / Google Play | CodePush |
|---|---|---|
| Час доставки | 1–3 дні | 2–5 хвилин |
| Проходження рев'ю | Обов'язково | Не потрібно (для JS) |
| Rollback | Ні (тільки новий реліз) | Автоматичний при краші |
| Контроль аудиторії | 100% | Поступовий (10% → 50% → 100%) |
Як ми налаштовуємо CodePush: реальний кейс
Встановлення та інтеграція типового проекту:
npm install react-native-code-push npx pod-install # iOS У AppDelegate.mm (iOS):
#import <CodePush/CodePush.h> - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge { #if DEBUG return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"]; #else return [CodePush bundleURL]; #endif } У головному компоненті:
import CodePush from 'react-native-code-push'; const App = () => { // ... компонент }; const codePushOptions = { checkFrequency: CodePush.CheckFrequency.ON_APP_RESUME, installMode: CodePush.InstallMode.ON_NEXT_RESUME, mandatoryInstallMode: CodePush.InstallMode.IMMEDIATE, }; export default CodePush(codePushOptions)(App); InstallMode.ON_NEXT_RESUME — оновлення застосовується при наступному виході з фону, не перериваючи користувача. IMMEDIATE — тільки для критичних обов'язкових оновлень.
Деплой через Fastlane
lane :codepush_staging do sh("appcenter codepush release-react \ -a MyOrg/MyApp-iOS \ -d Staging \ --description '#{ENV["CHANGELOG"]}' \ --target-binary-version '~1.2'") sh("appcenter codepush release-react \ -a MyOrg/MyApp-Android \ -d Staging \ --description '#{ENV["CHANGELOG"]}' \ --target-binary-version '~1.2'") end --target-binary-version '~1.2' — семвер-вираз. Оновлення отримають лише користувачі з нативною версією 1.2.x. Якщо новий JS-бандл використовує нативний модуль з 1.3, пушити на 1.2 не можна.
Стратегія rollout: як уникнути проблем
Не викатуйте CodePush одразу на 100% аудиторії. AppCenter підтримує --rollout:
appcenter codepush release-react \ -a MyOrg/MyApp-iOS \ -d Production \ --rollout 10 10% користувачів отримують оновлення. Через 30 хвилин дивимося Firebase Crashlytics — якщо crash rate не зріс, розширюємо через AppCenter UI до 50% → 100%.
Що входить в роботу: deliverables
Налаштування CodePush включає:
| Що робимо | Результат |
|---|---|
| Аналіз архітектури та підготовка dev-оточення | Звіт про сумісність, план впровадження |
| Інтеграція SDK та налаштування AppCenter | Робочий білд з CodePush у Staging |
| Автоматизація через Fastlane та CI | Скрипти релізу, pipeline у GitLab CI / GitHub Actions |
| Налаштування моніторингу та алертів | Дашборд AppCenter, інтеграція з Crashlytics |
| Документування та навчання команди | Інструкція з випуску оновлень, чек-лист rollout |
Етапи роботи
- Аналітика (2–4 години): аудит поточної архітектури, перевірка сумісності з CodePush, визначення target binary версій.
- Проєктування (2–4 години): вибір схеми перевірки оновлень, план rollout та fallback.
- Інтеграція (4–8 годин): встановлення SDK, конфігурація AppCenter, правка коду для підтримки CodePush.
- Автоматизація (4–8 годин): Fastlane-скрипти, CI-пайплайн.
- Тестування (2–4 години): rollout на Staging, моніторинг крашів, тестування rollback.
- Запуск (1–2 години): rollout на Production з поступовим розширенням.
Обмеження та що не працює
CodePush не може оновити:
- Нативний код (Swift/ObjC/Kotlin/Java)
- Нативні залежності (додавання нового pod або aar)
- AndroidManifest.xml та Info.plist
- Splash screen та іконку додатку
Якщо PR зачіпає нативну частину — потрібен стандартний реліз через магазин. CodePush від Microsoft AppCenter оголошений deprecated на користь EAS Update (Expo). Для проектів не на Expo ми розглядаємо міграцію на власний сервер code-push-server, щоб зберегти незалежність від AppCenter.
Моніторинг оновлень
AppCenter Deployments показує статистику: скільки пристроїв отримали оновлення, скільки відкотилися. Автоматичний rollback спрацьовує при краші одразу після оновлення — CodePush повертає попередній бандл.
Згідно з документацією AppCenter, CodePush використовує прогресивний rollout для мінімізації ризиків.
Додатково: що таке CodePush насправді
CodePush — це хмарний сервіс, який дозволяє розробникам розгортати оновлення мобільних додатків безпосередньо на пристрої користувачів. Він працює з React Native та Cordova, замінюючи лише веб-ресурси (JS, HTML, CSS, зображення).Досвід та гарантії
У нас 6 років досвіду в розробці React Native. Ми впровадили CodePush для десятків проектів: фінтех, маркетплейси, соціальні мережі. Гарантуємо стабільність оновлень, швидкий відкат та повну документацію процесу. Зв'яжіться з нами для безкоштовної консультації — оцінимо ваш проект і запропонуємо оптимальну стратегію впровадження CodePush. Замовте налаштування під ключ і забудьте про довгі очікування рев'ю.