It’s alive! Get your Ionic app to update automatically (Part 1)

If you love hybrid mobile development, it’s probably because you are also really fond of web development. One of the reasons is likely that you’re always certain that users are getting the latest version you deployed.

Hybrid mobile development sure is moving fast, but this was made possible only a few months ago, thanks to Ionic Deploy, one of the greatest features of Ionic.io. Before, you had to wait up to two weeks for Apple to approve each update. Here’s how you can get those out there with a single command.

Creating your app

Creating an Ionic app is dead easy. Start by signing up on Ionic.io and get ready to code. I’m calling my app updaty but please do pick your own name.

npm install -g cordova ionic
ionic start updaty tabs
cd updaty
ionic add ionic-platform-web-client
ionic io init
ionic plugin add ionic-plugin-deploy

Guess what? You already have an app using a basic tabs template and it’s already hooked up with Ionic.io services, including Ionic Deploy. You can get some information about your application on the Ionic.io Dashboard where your app should now be listed.

Ionic View

Ionic View allows you to very quickly get testers or clients to use your application. Just run ionic upload and anyone having your credentials or who was invited through the “Settings->Collaborators” section of the dashboard will be able to try out your app using the Ionic View app, available on the App Store and Google Play Store.

Here’s the catch : only a few cordova plugins will work, and you will not always have the same behavior than your application once it gets in production. I highly recommend it when starting out if you want to quickly show features to your client, but start working on getting a real application provisionned, for instance to follow the rest of the tutorial.

Ionic Deploy

Let’s get serious. Let’s say you’ve got the actual application on your phone, maybe even in production and let’s also say you really like agile development and you don’t want users to have to download a new version to get all the features you want to put daily in production.

Ionic Deploy gives you quite a few possibilities on how you want to handle the updating of your application, which always requires a restart when over. My recommandation is to always download the latest version on the background, but not to restart the app immediately, so that :

• The user can use your app while the update is being downloaded
• The user can dismiss the restart if he/she is busy using your app

Fetching updates

Here is how I fetch updates, with the help of $ionicPopup in order to give the possibility of dismissing the restart of the app.

.run(function($ionicPopup) {
  var deploy = new Ionic.Deploy();
  deploy.watch().then(function() {}, function() {}, function(updateAvailable) {
    if (updateAvailable) {
      deploy.download().then(function() {
        deploy.extract().then(function() {
          deploy.unwatch();
          $ionicPopup.show({
            title: 'Update available',
            subTitle: 'An update was just downloaded. Would you like to restart your app to use the latest features?',
            buttons: [
              { text: 'Not now' },
              {
                text: 'Restart',
                onTap: function(e) {
                  deploy.load();
                }
              }
            ]
          });
        });
      });
    }
  });
};

• watch takes as a third argument a progress function, which gets called every minute to check for updates. That way, a new update can be fetched even if the user never closes the application. We want to start watching as soon as the app starts, hence putting all of this in a run block. This check is done in the background and asynchronously, which means that there is no impact on the performance of the application.
• download downloads the latest update into your device.
• extract extracts it.
• Once the update is extracted, it is applied to your application the next time it gets restarted;
• unwatch gets called because we want to stop trying to fetch new updates, until the user has chosen to restart the app now or later.
• load restarts the app immediately and gets called only if the user taps on the “Restart” button.

Pushing updates

Only one command is needed, and you already know it! That’s right, I’m talking about ionic upload!

On your (now very familiar) Ionic.io Dashboard, you can get on the “Deploy” section all the updates you deployed, and have the possibility to rollback to an older version if you made a mistake! Oops!

What’s next?

In part 2, we see how we can handle multiple environments by having several versions of your app (staging, preprod, prod for instance) with a single codebase, and getting environment specific updates using gulp, a few gulp plugins, and Ionic Deploy.