Implementing Code Push in Capacitor(3.x) Applications.

Image from Unsplash.com

Have you ever been faced with the need to get a fix/update to your users as soon as possible but you have to wait for playstore and appstore to review your apps before it gets to the users? Then this article is a quick win to overcome the barrier.

Before we jump to the technical aspect of this article, I will want to lay a little background of what CODEPUSH is and what CAPACITOR is.

What is Codepush

Codepush is an infrastructure that allows for instant and automatic update of your Capacitor, Apache Cordova and React Native applications without going through the appstore or playstore. It is owned by Microsoft under App Center Clound services. Read more from here…

What is Capacitor

Capacitor is an open source native runtime that bundles your web assets(HTML, CSS and Javascript) into native apps that runs on multiple platforms (iOS, Android, Desktop, PWA). It is owned by the ionic team. You can read more from here…

How Code push works

After you have made changes to your code(probably fixed a bug), and have compiled your code, then it is ready to be served to your users by uploading the web asset to the codepush server and it wil be delivered to you app users. The good thing is that you can also rollback an update in cases where you push update that breaks the app.

Getting Started

The first step in getting codepush to work is to setup an account on the app center website here. The registration takes less than a minute, after which you will be required to add new app. In this process, you will be asked choose an OS and a platform. In the ecample below, we created a new app for ios and since we are using capacitor, we choose the cordova platform.

Update: Appcenter no longer support cordova so you will not see cordova in the option any longer. But not to worry, you can choose react-native as the platform, it will still work perfectly.

NOTE: You will have to create a different app for each OS.

NOTE: you can also work with appcenter from your terminal by installing the appcenter cli … Read more on setting up appcenter cli here

npm install -g appcenter-cli

Then authenticate your terminal to use appcenter

appcenter login

After creating an account and adding an app, we can now start setting up our capacitor app. First, we will install the codepush plugin and other neccessary plugins. The github repo to the plugin is here…

npm i @capacitor-community/http@next 
npm i @capacitor/device 
npm i @capacitor/dialog 
npm i @capacitor/filesystem
npm i https://github.com/mapiacompany/capacitor-codepush
npx cap sync

After installing the codepush plugin, we can now setup the app to connect to codepush server and listen for updates. To do this, we will first include the codepush api and development keys in our capacitor.config.json or capacitor.config.ts file. For a bit of security we can optionally add code signing to the config file.

To generate a signing key (optional), run the following command in your project folder.

//generate private RSA key and save it in a file
openssl genrsa -out privateKey.pem

//export public key from privateKey.pem into publicKey.pem
openssl rsa -pubout -in privateKey.pem -out publicKey.pem

Now we can setup the capacitor.config.json file by adding the following to the file:

"plugins": {
    //some other plugins
    "CodePush": {
      //can be found in your appcenter Demo-ios app dashboard
      "IOS_DEPLOY_KEY": "YOUR_IOS_DEPLOYMENT_KEY", 
      //the content of your publicKey.pem
      "IOS_PUBLIC_KEY": "YOUR_GENERATED_SECRET_KEY",//(optional)
      //can be found in your appcenter Demo-android app dashboard
      "ANDROID_DEPLOY_KEY": "YOUR_ANDROID_DEPLOYMENT_KEY",
      //the content of your publicKey.pem
      "ANDROID_PUBLIC_KEY": "YOUR_GENERATED_SECRET_KEY",//(optional)
      "SERVER_URL": "https://codepush.appcenter.ms/"
    }
}

NOTE: you can also get your deployment keys from the terminal by running the following command in your terminal

appcenter codepush deployment list --app <ownerName>/<yourAppName> --displayKeys

In order to ensure security(avoid data injection attacks) while connecting to the codepush server, you need to configure your web server to run the Content-Security-Policy(CSP) HTTP header by adding the codepush server url to the CSP meta tag in your index.html file. Read more…

<meta http-equiv="Content-Security-Policy" content="default-src https://codepush.appcenter.ms 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *"/>

After setting up the plugin in our app, we need to tell our app what to do when there is an update from codepush. We can let the codepush plugin handles everything (checking, downloading and installing updates) by simply doing the following in your app’s device ready state:

import { codePush, InstallMode } from 'capacitor-codepush';
import { App } from '@capacitor/app';
App.addListener('appStateChange', ({ isActive }) => {
if (isActive) {
    codePush.sync();
}else{}
});

NOTE:- From my experience, this process has a known error of not calling the notifyApplicationReady() function sometimes which leads to rollover of updates.

NOTE: It’s advisable not to use alert popup in ios because ios does not allow it.

You may also use this version where you handle every stage of the update yourself. (I strongly recommend this version of handling the process yourself). You can read the plugin doc here for more extensive usage.

Pushing the update to codepush server

It’s time to push the code to the codepush server but before that, we need to compile the app. you can read more from here to know more about the parameters.

//for IOS
appcenter codepush release -a <ownerName>/<yourAppName> -c ios/App/App/public -t '1.0' -d <deploymentName> -m --description "new update" -k privateKey.pem
//for Android
appcenter codepush release -a <ownerName>/<yourAppName> -c android/app/src/main/assets/public -t '1.0' -d <deploymentName> -m --description "new update" -k privateKey.pem

For ionic app, before pushing the update, run ionic cap build

With this in place , your app will be able to recieve update anytime without delay.

You can contact me on email or twitter if you have any question.