Businesses can customize white-label applications as their own, saving the time and money required to develop an app from scratch and deal with the upkeep. The problem for developers, though, is that whenever the underlying mobile app or backend is modified, potentially hundreds of variants have to be dealt with one at a time—and it takes a lot of time to upload new versions of each custom app to the Apple Store and Google Play Store.

This is the quandary we faced working on a customer-facing retail-ordering app. Of the over 300 organizations using the company’s web apps, over 200 offered mobile Android and iOS versions. Here’s the architecture of the hybrid application, which we built using Angular for the mobile and web apps’ UI, and Node.js for the backend server:

Whenever we made changes to the servers, the frontend (which includes the ordering app) and the backend should reflect those changes. We used Jenkins to deploy the latest builds of the ordering web application, the backend, and the servers. But for native apps we needed to build the Android and iOS applications manually and deploy them one by one in the Apple and Android app stores.

The company had used the Bitrise automation tool to auto-update the first version of its mobile applications, but dealing with environment configurations for each update, with a separate set for each organization, made for a complicated and time-consuming process. Also, each build involved a lot of manual interventions. For a single native application it would take around two hours to complete the build and deployment process, and after submitting the update for review, it would take at least 48 hours for the two app stores to publish it. With more than 200 organizations using a distinct native application, the time pressure was crushing, and it was time to find a better solution.

 

What’s Live Update?

We settled upon Ionic Appflow’s Live Update feature, which would let us update the UI and business logic of the app remotely—in real time. We’d be able to push HTML, JavaScript, and CSS updates directly to the user’s device without going through Apple’s and Google’s app stores, thus allowing us to instantly fix bugs and ship new features. The deploy feature works with Ionic Appflow and requires the app to be connected to a Git repo in order for Appflow to access the developers’ source code and then deploy the new code updates. Ionic Appflow allows us to build and deploy the latest code by taking the Git server’s latest web package and sending it to native apps through a “channel.” Ionic Live Update plugins installed in each mobile app will download this deployed package in the background, and when the app restarts, the downloaded package will update the existing code in the app.

We also have a choice of two methods to update the live application: (1) allowing a user to permit or deny each update using a popup or (2) downloading the package in the background when the app is being opened. 

 

Integration of Ionic Appflow Live Update to an Existing Project

We needed to integrate the application and Ionic in order to make use of the Live Update feature. To install the necessary Ionic components and package to the project we used this command: 

$ npm install -g @ionic/cli native-run cordova-res

Capacitor plugins are used to generate the Android and iOS applications, so we needed to integrate Capacitor and Ionic to add Live Update code and configurations to the native apps. The following command helped integrate Ionic and the Capacitor:

$ ionic integrations enable capacitor

We then added the Android and iOS projects with the help of the Capacitor plugins:

$ npx cap add android ios

$ npx cap copy android ios

$ npx cap sync android ios

We then had to create an app in the Ionic App flow console, as once it is created it generates the required application ID, channel name, and update method. If the Git repo and the code had already been integrated, then we would have only needed to import the existing app in the Ionic Appflow console:

You can then connect with your code repository and select the plugins you need for the project. There are four options available to select: Ionic, Capacitor, Cordova, and (coming soon) React Native. We can choose either capacitor or Ionic as we have integrated both:

After creating a new app in the Appflow console, you then copy the application ID, channel name, and update method. You can then configure the Ionic Live Update features in the native app projects with the Ionic commands:

$ ionic login 

$ ionic link <application id>

$ ionic deploy configure --app-id=3910e769 --channel-name="Production" --update-method="background" --max-store=2 --min-background-duration=10

Here’s a description of the parameters used:

app-id: Appflow’s application ID 

channel-name: The channel to check for updates from

update-method: The update method that dictates the behaviour of the plugin

min-background-duration: The minimum duration after which the app checks for an update in the background

max-store: The maximum number of downloaded versions to store on the device

You’ll then generate the apk or aab file from the Android project that includes the Live Update configuration. The first time we used Live Update for an app we needed to do a one-time manual deployment to the Playstore. We also deployed the iOS app to Apple’s app store with the required Live Update configurations.

Live Update Builds

A Live Update build of our application consists of just the web assets (JavaScript, HTML, fonts, and images) that can be shipped out to the customer via a Live Update deployment. Live Update builds can be created manually from the Ionic Dashboard, in the Builds section. You will be able to pick from the list of available commits that Appflow knows about. If there are no available commits you will need to push a new commit to your Git remote for it to show up in Appflow.

 

After you select the commit, pick Web from the Target platform dropdown menu and choose the preferred build stack. Follow the steps below to build the update and web package it for the Live Update:

 

Build Processes in Ionic Appflow 

The Live Update build of the mobile apps only include the web assets that will get deployed to the customer’s channel. It will be created manually from the Ionic Dashboard under the Builds section.

The build goes through these steps:

• npm install will install any dependencies you have.
• The npm run build command will run if a build script is detected in the Scripts section of your package.json to build the web assets for your application.
• The www directory (or, for a Capacitor project, the directory specified in the capacitor.config.json file’s webDir key) containing your built application will be stored and made available for live updates.
• You can find the history and status of your Live Update build in the side menu under Builds in the Build tab.

Channels

What is a channel?

In simple terms, a channel is a specific Live Update build of our app to be shared with devices that will be checking for updates. 

The app will be installed with the Appflow SDK and will be configured to that channel, allowing it to check for any updates when the app is loaded.

Setting up a Channel​

Production is the default channel for all the apps and this channel cannot be deleted.

New channels can be added by choosing Deploy ⟶ Destinations, then clicking the New Destination button.

Most common is using the Production channel for app store binaries, and a separate channel to run a native binary on your phone during development that gets automatically updated. 

Assigning a Build to a Channel

Once the channel is created, go to the Builds section of the app. On the right side of each Build you’ll see a Deploy Live Update button.

Once you push the button you’ll see a Deploy Live Update modal.

Click the Deploy button to set the build as active for a channel.

Once a build is set as active for a channel any native binaries that have been set up with Ionic Live Update for this channel will receive the new update next time they check in.

Conclusion

By automating deployments through all stages from Git push to deploying to a channel, you can simply push the latest code to the specified Git branch configured in the Live Update build and it will automatically build all the apps with the latest version. 

This way we were able to save substantial amounts of time. Now, the automated deployment process for live updates takes a total of around 20 hours for the build and the deployment to get completed—for all of the over 200 native apps. Earlier we had to spend two hours for each native app deployment to the Google Play Store or the Apple Store, and we risked making manual errors during the tedious and long process.

Live Update has turned out to be an efficient and reliable solution to satisfy our client’s business needs as its app grew in popularity. Without it, updating mobile apps would have continued to be a long and tedious process, adding unnecessary costs and delays.

 

About the Authors

Kiran K A has been a senior DevOps engineer at AOT Technologies for around three years. His expertise includes Amazon Web Services, mobile application deployment using various automation frameworks, Bash scripting, and CI/CD Tools. Other than developing his professional experience he is fond of playing cricket and travelling.

Sakthi Saranya Sivanandam has been a DevOps engineer at AOT Technologies for the past two-and-a-half year. She is experienced in cloud infrastructure projects (Amazon Web Services), native application deployment tools, automation frameworks for CI/CD setups, and POS integration support and testing. Her hobbies include travelling and listening to music.