Hot deploy updates to Ionic 3 apps with Ionic Deploy

Published: January 13, 2017  •  Updated: January 17, 2018  •  ionic

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.

With Cordova / PhoneGap (and React Native) apps you have an additional option. These frameworks wrap JavaScript applications inside a native wrapper and are able to update, with the help of a plugin, the containing resources on the fly. This way you can update, remove and add JavaScript, HTML, CSS files and assets like pictures, music without re-submitting the whole application to the stores. You can only update the resources that are embedded in the native wrappers. There is no way to update the wrapper itself. If you add a new cordova plugin to an app you always have to re-submit the app.

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.

3.3.2 Except as set forth in the next paragraph, an Application may not download or install executable code. Interpreted code may only be used in an Application if all scripts, code and interpreters are packaged in the Application and not downloaded. The only exceptions to the foregoing are scripts and code downloaded and run by Apple's built-in WebKit framework or JavascriptCore, provided that such scripts and code do not change the primary purpose of the Application by providing features or functionality that are inconsistent with the intended and advertised purpose of the Application as submitted to the App Store.


Preparation

In this article we have a look at how you can hot update an Ionic app with Ionic Deploy. The service is part of Ionic Pro. Ionic offers a free tier which includes deployments to 20 devices per month.

Before we can use any Ionic Pro service we need an account. If you don't already have one go to https://dashboard.ionicjs.com/signup or enter the command ionic signup in the shell.

Then in the shell, login to Ionic Pro.

ionic login

Next we have to open the Ionic Pro dashboard and create a new app.


Initial version

After you created the app in the Ionic Pro dashboard you see instructions how to start a new app or link Ionic Pro with an existing app. For this tutorial I start from scratch. I named my application myapp so the following command will create a directory with the same name. Select the blank template if you want to follow the example in this blog post.

ionic start --pro-id <pro-id>
cd myapp

Now open the file myapp/src/pages/home/home.html and add a version to the content of the page. This allows us to later verify if the application has updated or not.

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Pro Deploy
    </ion-title>
  </ion-navbar>
</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>

https://github.com/ralscha/blog/blob/master/deploy/src/pages/home/home.html

Next we commit all the changes and push the code to Ionic Pro

git add -A && git commit -m "Your Message"
git push ionic master

Next we need to install the Cordova Ionic plugin. Login to the Ionic Pro Dashboard, open the Code and Channels Tab and click on "Set up Deploy". Navigation

You can choose between the following update methods. UpdateMethods

With the update methods "auto" and "background", the plugin manages the updates automatically. 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 "auto" method. The plugin will in this mode download the updates during app startup and install them immediately.

cordova plugin add cordova-plugin-ionic --save --variable APP_ID="<pro-id>" --variable CHANNEL_NAME="Master" --variable UPDATE_METHOD="auto"

Commit and push the changes again to Ionic Pro.

Now we are ready to build the app. I install the app on an Android phone but Deploy also works on iOS.

ionic cordova run android

Update

To create an update we change the version in the myapp/src/pages/home/home.html file.

<ion-card-content>
 0.0.2
</ion-card-content>

And to deploy the update we commit the change and push it to Ionic Pro

git commit -am "v2.0.0"
git push ionic master

Ionic Pro now builds the app and publishes it to the preconfigured Master channel.
Wait a few seconds, then close the app on the device and open it again. You should now see 0.0.2 in the app.


You find the source code for this project on GitHub

If you want to learn more about Ionic Pro Deploy go to the documentation page: https://ionicframework.com/docs/pro/deploy/