Need to dynamically update your hybrid app’s web content & code? CodePush to the resque!

Reading Time: 5 minutes

CodePush LogoThe versatility of hybrid mobile apps is astonishing; the unlimited experiences that one can build the web layer, gently cradled into a native shell, custom baked and deployed off into iOS, Android or Windows space (or one of those other outskirts of mobile galaxy).

No matter how versatile your creativity may be, once baked into the shell and blasted off into AppStore destinations the content is quite fixed, nè, the structure is quite fixed. WordPress plugin api, Contentful, Umbraco are all means to provide our app with dynamic content (text, images, etc) and show it to from your app screens.

But what if the structure of your oh-so-carefully crafted content is not what the last-minute production app needs to deliver to its users, diminishing its value to “outdated” or “just nice to have”? Or if the API of your app changes just a day after your iOS app was submitted for review, with only 8 days to go until the launch party?

Keep Calm and Use the Force
There are means to an end that prevent these pains for happening that will allow you to update the web layer of your application so at least while you stay in the web side of the mobile Force, you can be flexible and agile without having to wait for the platform quality troopers to give your blast off its deserved permission.

In this post i’ll highlight one of the newest hybrid app update solutions that will make your hybrid app flexible and maintainable; Microsoft CodePush.

More after the break

[ad name=”Generic Large Mobile Banner 320 x 100″]

Microsoft CodePush is truly the new kid on the block. It just started its “open beta” on 18 November 2015 and is looking very promising. They have a dedicated website and are open for feedback from the community before finalizing the service.
And best of all: it’s totally free while they are in beta so take advantage of this – after reading this post of course – and give your hybrid mobile app that extra flexibility it deserves!

What is CodePush
CodePush describes itself on their dedicated website as follows:

CodePush LaptopCodePush is a cloud service that enables Cordova and React Native developers to deploy mobile app updates directly to their users’ devices. It works by acting as a central repository that developers can publish certain updates to (e.g. JS, HTML, CSS and image changes), and that apps can query for updates from (using our provided client SDK’s). This allows you to have a more deterministic and direct engagement model with your end-users, while addressing bugs and/or adding small features that don’t require you to re-build a binary and/or re-distribute it through any public app stores.

In My Own Words
CodePush provides mobile developers with a very easy and clean service to update the entire contents of your hybrid app’s WWW directory. This means that you can update not only content but also make html changes, fix JavaScript issues or add additional tweaks and changes that polish your app without having to go through the entire deployment (and review) process.
PLEASE NOTE: Apple allows you to make minor changes. You may not change or expand core functionality of your app. In short; tweaking & bug fixing: yes, changing functionality: NO. Read more on this on CodePush’s FAQ.

CLI
You can fly CodePush by utilising the command line interface (CLI) on your Mac or Windows machine and give it all sorts of commands. Once you’ve logged into the service with the login parameter – and adding either your GitHub or Microsoft credentials in the pop-up window that follows – you’ll need to navigate to the directory that contains your project’s WWW directory. From there you can add updates and indicate for what version of the app the update is used.

Test environment
One of the things that Azure has is the in-house support and functionality for testing your stuff in a test environment called Staging. CodePush integrated this concept nicely and provides you with a Production and Staging environment per default. This means that – using a unique CodePush environment GUID- you can indicate what CodePush repo your app needs to listen to and sync with.
Obviously, using Staging for your development version would be the way to go and test updates before rolling them out to actual users.
PLEASE NOTE: With great power (and flexibility) comes great responsibility; test your updates thoroughly before pushing updates with Codepush to your production version.

Cordova integration
CodePush has integration for both the Cordova and React Native hybrid application frameworks, which will cover a lot of other frameworks (like Ionic Framework) that are based on the tech of those frameworks.
For Cordova, integration is as easy as installing a plugin called cordova-plugin-code-push and setting some security settings in the config.xml. Using a preference with a GUID as value to configure what environment (Staging or Production) you want to sync with and you’re already good to go.

The plugin provides more than enough handles to take care of stuff like:

  • synchronisation behaviour (instantly download, next startup, etc)
  • providing events to monitor and react on update sync progress and state changes
  • interact with the user with dialogs to ask if the update may proceed
  • giving along values that indicate if the update is mandatory etc to provide your own functional handling of those parameters

Change management
It obviously is running on Microsoft’s Azure technology in the background, which provides it with a fast and clean cloud backend to support the synchronisation and preserving state and history for the last 50 updates being send. You can even undo your last change and rollback to the previous version, displaying this as another update in the list (but to a previous version).
The possibility to provide a description and an ID for your update makes keeping track of your update content and the history easy and simple.

Alternatives
Of course the idea to push updates to the WWW layer into production distributed mobile apps isn’t all new. Big frameworks like Ionic Framework introduced services for pushing updates before and there are a few Cordova plugins that let you sync custom stuff like the phonegap-plugin-contentsync plugin that is using JSON and ZIP packages to provide you with an information container which your app can use to update itself.
As easy as they all are, the low-level integration by adding a plugin and being able to update the WWW root is both powerful and easy. Not having to worry about storing your versions locally but having a 50 updates long history available in the cloud is also a very nice plus.

Introduction
Besides the CodePush website located at https://microsoft.github.io/code-push a good resource to get a first impression is this video in which Jonathan Carter from Microsoft explains the basics: 

Conclusion

I just digged into this service and could have used it for some hybrid projects that I build in 2015 while working at my day job.
I’ve been playing with it for a little now and I really like how easy this service can be integrated and used. I’m confident that my next hybrid project will make use of this and that I’ll be thankful that there is a safety net for those little things that can slip through the unit tests, functional tests and integration tests.
I always like to see tools and services that make development and my products more flexible since it adds to the agile spirit and enables us to give more value for the customer.

Sidenote on Microsoft
The way projects like CodePush get out there and ask for community involvement really shows the growth and maturity that Microsoft has undergone. I love how they’ve opened up and it is inspiring to see a “corporate tanker” turning itself more and more into an “agile speedboat”. Kudos for that, Microsoft!

Joda
Now, go and learn to use this force, you must