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.


You liked this article? You'd probably be a good match for our ever-growing tech team at Theodo.

Join Us

  • Guillaume Diallo-Mulliez

    Great article ! Can’t wait to read what’s coming next

  • Alejandro Planter

    Incredible, we will not need backend services anymore.

  • GP

    The onTap should be part of the restart button object. It does not get called as is.

  • Woody Rousseau

    Thanks a lot, I made the modification :) Hope the rest is working fine for you

  • Alejandro Planter

    Woody, i’m using the code that Ionic docs has, it’s working fine, what i want its that the app constantly checks if an update is working without restarting the app, any help?

  • Woody Rousseau

    Hey Alejandro ! The code sample I gave in the article does precisely that, it checks every minute for updates and then asks the user if he/she wants to restart now. If you remove the $ionicPopup part altogether, the app will be updated the next time the user kills and runs again the app. If you need more information, I’d be glad to help

  • Alejandro Planter

    But, can I make to constantly watch for updates, and everything without restarting the app and without the user knowing?

  • Woody Rousseau

    If you don’t use the $ionicPopup part, the user will never know about the updates, if you never call deploy.load(), the app will never be restarted and if you never call deploy.unwatch(), you will constantly watch for updates. However, for any of those updates to be applied to your app, you will eventually need to restart the app (either by calling deploy.load() or by having the user kill and relaunch the app).

  • Alejandro Planter

    Okey, i get it now, i will use your code with a little modification, thanks a lot, saved a lot of work!

  • Woody Rousseau

    Glad to help, the next part of the tutorial is coming soon and will probably be useful if you have several environments for your app :) Stay tuned !

  • Durgesh sharma

    Is it going work for live app which is not build using Ionic.io ??

  • Woody Rousseau

    Hi Durgesh ! What do you mean ? You don’t need to use the Ionic framework but you’ll need the npm dependencies I listed above, `ionic-platform-web-client` and the cordova plugin `ionic-plugin-deploy`. You don’t need the rest but you may have to adapt the code a tiny bit to make it work.

  • Durgesh sharma

    “Ionic Deploy, one of the greatest features of Ionic.io.”
    I read this in your article.
    Can I use this auto update feature without using Ionic.io service?

  • Woody Rousseau

    You do need to use the service, but it is very easy to add to your project, it is currently free and then the pricing plan will include a free tier.

  • Durgesh sharma

    Thanks buddy :)

  • Rob Matwiejczyk

    I found that I had a very slow download speed on iOS with the deploy service. For some reason this meant that the download kept restarting. For anyone having the same issue I ran “deploy.unwatch();” before “deploy.download();”

  • Russell LaCour

    Thank you so much, after an hour of trying to figure this out your code has saved my life.

  • Woody Rousseau

    Thank you for your feedback, I’m glad it was of help to you :)

  • Woody Rousseau

    Interesting but if the download somehow fails, the app won’t be watching for the update anymore until the user restarts. You could possibly start watching again in the `catch` callbacks of the `download` and `extract` calls

  • Lavraj

    Hi Buddy, my app not able to update downloaded code and apply update from deploy.load() or deploy.update() function only way i get to user kill and relaunch the app.
    Can you help me @Woody

  • Don Ellingsworth

    Has anyone gotten this working on Ionic CLI v2.1.0?

  • owz

    Hi, may I know whether this solution applies to Ionic 1 too?

  • Woody Rousseau

    Hi owz, it does apply to Ionic 1 but it’s been a few months so they’ve updated the way it is done so if you start fresh you might have to adapt some stuff

  • Woody Rousseau

    Hi Don, I haven’t not, sorry for the late reply. Did you get a chance to try it out?

  • Yes it works well with Ionic v1, below you will find a snippet of code that shows how I used it yesterday:

    document.addEventListener(“resume”, function () {
    $ionicDeploy.check().then(function (snapshotAvailable) {
    if (snapshotAvailable) {
    $ionicDeploy.download().then(function () {
    return $ionicDeploy.extract().then(function() {
    $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) {
    $ionicDeploy.load();
    }
    }
    ]
    });
    });
    });
    }
    });
    }, false);

  • Thanks for writing this up. It was almost a perfect match for what I was looking for. You saved me a ton of time!

  • kaushal

    Hello Jay,
    I’m using Ionic v1 and i got this error “Uncaught ReferenceError: $ionicDeploy is not defined” I have past your code inside app.js on device ready and ionic add ionic-platform-web-client is necessary?

    Please Replay Thanks.

  • NuclearNic Dev

    Thanks for the write-up. Much appreciated.

  • minhajkk

    http://docs.ionic.io/setup.html#installation
    Follow this guide to install dependency

  • ntziolis

    Was watch() removed? Cant find it in the current version anymore. Any suggestions how to replace it?

  • Alex Balazs

    is this code to by added to app.js???thanks

  • Damien Buton

    Do we need a business ionic account to use this plugin? or is it possible to use it with kickstarter or developper account?