The lifecycle of a mobile app does not end after the initial submit to the mobile stores. You have to fix bugs, change existing features and add new features. With a native application you only have the option to re-submit every new app version to the stores and wait for their approval.
One question that always comes up if you talk about these kinds of update is if Apple allows that. According to the iOS Developer Program these on the fly updates are allowed as long as you don't change the main purpose of the application. Don't transform your calculator app into a game.
In this article we have a look at how you can hot update an Ionic / Cordova app with Ionic Appflow Live Deploy. The service is part of Appflow. Ionic offers a free tier which includes deployments to 100 devices per month.
Before we can use any Appflow service, we need to create an account. If you don't already have one go to https://dashboard.ionicframework.com/signup or enter the command
ionic signup in the shell.
Then back in the shell, login to Appflow.
Next open the Appflow dashboard and create a new app.
After you created the app in the Appflow dashboard, Appflow assigns a unique number to your project. In this example it's the id
If you already have an Ionic app you can link it to Appflow with the following command.
ionic link --pro-id 512fe61e
But for this tutorial I start from scratch. The following command creates a new project with the name
myapp, based on the blank starter template and linked to the Appflow project. Replace
<pro-id> with the id of your project.
ionic start myapp blank --type=angular --pro-id <pro-id> cd myapp
start command asks which Git hoster it should use. You have the choice between Ionic Appflow and GitHub. For this example I host the project on Ionic Appflow.
Now open the file
src/app/home/home.page.html and insert the following code. This allows us to verify if the update process works or not.
<ion-header> <ion-toolbar> <ion-title> Appflow Live Deploy </ion-title> </ion-toolbar> </ion-header> <ion-content padding> <ion-card> <ion-card-header> Version </ion-card-header> <ion-card-content> 0.0.1 </ion-card-content> </ion-card> </ion-content>
Next we set up Cordova. Live Deploy also works with apps installed on iOS but for this tutorial I only have access to an Android device.
ionic cordova prepare android
Then we need to install the Cordova Ionic plugin. Login to the Appflow Dashboard, open the Deploy and Channels menu and click on Set up Deploy.
You can choose between the following update methods.
With the methods
background, the plugin automatically manages the update. But you can control everything manually by selecting the third option
The Ionic plugin provides an API that can manage the whole update lifecycle via TypeScript code. See the documentation page for more information.
For this example I select the
auto method. The plugin will, in this mode, download the updates during app start and install them immediately.
cordova plugin add cordova-plugin-ionic --save --variable APP_ID="512fe61e" --variable CHANNEL_NAME="Master" --variable UPDATE_METHOD="auto"
Next commit all the changes and push the code to Ionic Appflow
git add -A && git commit -m "Initial commit" git push ionic master
Now we are ready to build the app and install it on a phone.
ionic cordova run android
To create an update we change the version in the
<ion-card-content> 0.0.2 </ion-card-content>
And then commit the change and push it to Ionic Appflow
git commit -am "v0.0.2" git push ionic master
Open the Appflow Dashboard. Select the menu Deploy / Builds. Click on New web build. The dashboard displays a list of commits. Click on the latest commit, select the channel
Master and click on Create build.
Appflow now builds the app and publishes it to the
Wait until the build is finished. Open the Deploy / Builds menu and verify that the build is assigned to the
Master channel. If not click on the arrow up icon and deploy the build to the channel.
To test the update process. Close the app on the device and re-open it. After a few seconds, you should see the updated version of your app.
If you want to learn more about Ionic Appflow Live Deploy visit the official page: