Mobile Apps are usually distributed over app stores. Whether it's a major functionality or a minor bug fix, all have to go through the store for updates.

CodePush is a service which allows us to partially update our apps circumventing App store releases. Let's explore Codepush in detail.

Overview

Previously, CodePush used to be a standalone service for managing app updates. Currently, it's part of App Center. App Center can be summarized as a testing and deployment service. It's akin to TestFlight but has features of HockeyApp & VSTS.

Using CodePush, we can update the JS assets of an app over the air. CodePush has a separate versioning system which allows us to manage the updates. Currently, it is available for the Cordova and React Native frameworks only. A separate app store release has to be made for native code updates.

Here is a brief flow for setting up a CodePush instance:

• Set up a project in App Center
• Set up local Cordova or React Native project
• Write code to handle CodePush events
• Create an app Release app
• Push an update via CodePush
• Manage releases in App Center

Set Up a Project in App Center

First, we will navigate to App Center. After signing up, we will be redirected to the dashboard.

To create a new app, click on the Add New (Add New App) button. Fill in the app name and select the OS and Platform buttons. As mentioned earlier, only Cordova and React Native Apps will have CodePush. Once the platform is selected, it cannot be changed.

Also, we will have to set up separate releases for Android and iOS. Once done, we will be redirected to the App Dashboard. Click on the distribute button to see the CodePush Window.

The code is pushed and fetched from App Center via deployments. Deployment keys are needed for project setup. By default, Staging and Production deployments are set up.

Let's set up the App Center CLI using npm.

npm install -g appcenter-cli

CodePush for Ionic & Cordova Apps

Installation

To setup CodePush, we will first install the CodePush plugin:

cordova plugin add cordova-plugin-code-push

For Ionic Projects, use

ionic cordova plugin add cordova-plugin-code-push
npm install @ionic-native/code-push

We will have to specify CodePushDeploymentKey in config.xml. Android and iOS have separate deployment keys. The key is available in the App Center Dashboard.

CodePush Cordova API

For Cordova, the sync function checks for updates and automatically downloads it. By default, the update is applied on app restart. The simplest way is to run sync when the app initializes.

codePush.sync();

This function can be configured to show the download progress. Additional sync options can also be supplied.

codePush.sync(syncStatus, syncOptions, downloadProgress);

Alternatively, we can manually configure updates using the following functions:

• checkForUpdate: checks latest update
• getCurrentPackage: checks currently installed update
• getPendingPackage: checks if the update is downloaded and applied
• notifyApplicationReady: notifies CodePush runtime that an update install was successful; this is a mandatory method in case we are not using the sync function.
• restartApplication: restarts the application

You can read more about Cordova API here.

Creating a Cordova Release

In Cordova's context, the www folder is considered as an app release.
We will use the App Center CLI to facilitate the same.

appcenter login

appcenter codepush release-cordova -a / -m --description "First Release" -d Staging

-m: This param is used to mark the release as mandatory.
-d: This is the deployment target. The deployment key should match the deployment for the app.

If both Android and iOS projects are in CodePush, then we will have to run the command twice for their respective projects.

In the case of Ionic projects, we need to build them using build command before releasing.

ionic build

CodePush for React Native

Installation

Install the plugin using npm or yarn

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

yarn add react-native-code-push

We will use react-link to set up our project.

react-native link react-native-code-push

We will be asked for deployment keys in the CLI window. We will enter the keys of the projects (Android and/or iOS) to proceed.

Code Push API for React Native

The CodePush API is limited compared to Cordova. We need to wrap our root component with CodePush. That's about it. This is akin to Cordova’s sync.

import codePush from "react-native-code-push";

class App extends Component {
}

App = codePush(App);

We can also specify options using

let codePushOptions = { checkFrequency: codePush.CheckFrequency.ON_APP_RESUME };

class App extends Component {
}

App = codePush(codePushOptions)(App);

CodePush has limited support for React Native’s assets system. Image, MapView.Marker, ProgressViewIOS, TabBarIOS.Item and ToolbarAndroid are currently supported.

Creating a React Native release

This is similar to a Cordova release

appcenter codepush release-react -a / -d Staging

Final Thoughts

CodePush makes sense if you have a long term project with multiple planned releases.

It's a neat technique when you have to deploy a critical patch quickly or stall users from using the old code. Using targeted versioning, users using old apps can be forced to run new code. For short term apps, there is a reasonable overhead.

As a final note, if you're building an application with sensitive logic, don't forget to protect it against abuse, reverse-engineering, and code theft by following our guides for React Native and for Ionic.