How to Properly Ship OTA (Over-The-Air) When in an Emergency?

Learn how to submit critical updates and fixes instantly through OTA.

The following article is a part of The Ultimate Guide to React Native Optimization and describes how to ship critical updates and fixes through OTA )over-the-air) methodology.

In the previous parts of our guide, we have discussed:

• Reducing the device’s battery usage with UI re-renders
• The best practices around using dedicated higher-ordered React Native components
• Picking external libraries
• Libraries optimized for mobile
• Finding the balance between native and JavaScript
• How to Achieve 60FPS Animations in React Native
• Why Is It Essential to Always Run The Latest Version of React Native?
• How to Debug Faster and Better with Flipper

Be sure to check them out.

Issue: Traditional ways of updating apps are too slow and you lose your precious time on them.

The traditional model of sending the updates on mobile is fundamentally different from the one we know from writing JavaScript applications for other platforms. Unlike the web, mobile deployment is much more complex and comes with better security out-of-the-box. We have talked about that in detail in the previous section focused on the CI/CD.

What does it mean for your business?
Every update, no matter how quickly shipped by your developers, is usually going to wait some time while the App Store and Play Store teams review your product against their policies and best practices.

This process is particularly challenging in all Apple platforms, where apps are often taken down or rejected, because of not following certain policies or meeting the required standard for the user interface. Thankfully, the risk of your app being rejected with React Native is reduced to minimum, as you’re working on the JavaScript part of the application. The React Native Core Team ensures that all the changes done to the framework have no impact on the success of your application’s submission.

As a result, the submission process takes a while. And if you’re about to ship a critical update, every minute counts.

Fortunately, with React Native, it is possible to dynamically ship your JavaScript changes directly to your users, skipping the App Store review process. This technique is often referred to as over the air update. It lets you change the appearance of your application immediately, for all the users, following the technique that you have selected.

When critical bugs happen -  minutes and hours can be critical. Don’t wait for Apple and Google to review your app.

If your application is not OTA-ready, you risk it being left with a critical bug on many devices, for as long as Apple / Google review your product and allows it to be distributed.

Even though the review times got much better over the course of
years, it is still a good escape hatch to be able to immediately recover from an error that slipped through the testing pipeline and got into production.

Solution: Implement OTA updates with App Center / CodePush

As mentioned earlier, React Native is OTA ready. It means that its architecture and design choices make such updates possible. However, it doesn’t ship with the infrastructure to perform such operations. To do so, you will need to integrate a 3rd party service that carries its own infrastructure for doing so.

The most popular and widely used tool for OTA updates is CodePush, a service that is now a part of Microsoft’s App Center suite.

Note: You have to create an account in the App Center in order to continue. If you were reading the previous section, you should already have one. The OTA option will be visible under the application you have created. It is generally a good practice to use both OTA and release capabilities from App Center for easier configuration.

Configuring the native side

To integrate CodePush to your application, please follow the required steps for iOS and Android respectively. We decided to link to the official guides instead of including the steps here as they include additional native code to apply and that is very likely to change in the coming months.

Configuring the JavaScript side

Once you set up the service on the native side, you can use the JavaScript API to enable the updates and define when they should happen. The simplest way that enables fetching updates on the app startup is to use the codePush wrapper and wrap your main component.

<rte-code>import codePush from "react-native-code-push";

class MyApp extends Component {}

MyApp = codePush(MyApp);

Basic CodePush integration <rte-code>

That’s it! If you have performed all the changes on the native side, your application is now OTA ready.

For more advanced use cases, you can also change the default settings on when to check for updates and when to download and apply them. For example, you can force CodePush to check for updates every time the app is brought back to the foreground and install updates on the next resume.

The following diagram code snippet demonstrates such solution:

<rte-code>

class MyApp extends Component { }
MyApp = codePush({
 updateDialog: true,
 checkFrequency: codePush.CheckFrequency.ON_APP_RESUME,
 installMode: codePush.InstallMode.ON_NEXT_RESUME
})(MyApp);

<rte-code>

Shipping updates to the application

After configuring the CodePush on both JavaScript and the native side of React Native, it is time to launch the update and let your new customers enjoy it. To do so, we can do this from the command line, by using the App Center CLI.

<rte-code> npm install -g appcenter-cli
appcenter login <rte-code>

and then, a release command to bundle React Native assets and files and send them to the cloud:

appcenter codepush release-react <rte-code>-a <ownerName>/<appName> <rte-code>

Once these steps are complete, all users running your app will receive the update using the experience you configured in the previous section.

Note: Before publishing a new CodePush release, you will have to create an application in the App Center dashboard. That will give you the ownerName and appName that you’re looking for. As said before, you can either do this via UI by visiting App Center, or by using the App Center CLI.

Benefits: Ship critical fixes and some content instantly to the users

With OTA updates integrated to your application, you can send your JavaScript updates to all your users in a matter of minutes. This possibility may be crucial for fixing significant bugs or sending instant patches.

For example, it may happen that your backend will stop working and it causes a crash at the startup. It may be a mishandled error - you never had a backend failure during the development and forgot to handle such edge cases.

A potential fix for this issue is simple - it may be enough to just display a fallback message and inform users about the problem. While the development will take you around one hour, the actual update and review process can take hours if not days.

With OTA updates set up, you can react to this in minutes without risking that bad UX will affect the majority of users.