Downloading an iOS UI

The purpose of this post is to demonstrate how, with basic code, an iOS UI can be updated or completely redesigned without submitting your app to the review process.

In the example, I’ll be using the libraries Everlayout and Alamofire. For more information on Everlayout, read my other post ‘Building and distributing iOS Layouts with EverLayout’.

Why?

Every iOS developer has at some point or another fallen victim to prolonged review times or frustratingly heightened scrutiny from the iTunes app review team. Most have also felt the panic of realising their newly approved release is broken or blemished. I feel the benefits of pushing UI updates to your already published iOS app, circumventing the review process, explain themselves. But to be particular, I think this practice can prove interesting in three scenarios:

• Hot-fixing blemished/broken layouts
• Experimental A/B testing with little hassle (“Make this button bigger for 10% of users, see if there is an increase in conversions.”)
• A service with lots of dynamic content (say, a catalogue or news reader) may wish to draw extra attention to new content by way of a layout change.

Although there are definitely practical benefits, I also think that it’s just cool!

End Result

A native iOS app written in Swift that, when suspended, will update its appearance and reflect those changes immediately upon returning to the foreground, without even having to reboot the app.

Method

There are actually a few things to consider here. I’ll briefly mention some aspects which will determine the correct approach to take, but the example I’ll give will be basic enough to demonstrate how fun this can be.

Considerations:

1. How important the UI updates are
2. The time between launching the app and the app becoming active
3. Whether or not the user has network connectivity
4. Whether or not the user has background app refresh enabled
5. How many layouts your app uses and how often they’re updated

For the sake of my demo I’m going to take all for granted and assume the user has background app refresh, network and that the app only uses one layout file (in contrast, my news reader app ‘Headline’ uses 17 layout files, so a more well thought out solution is required there.)

My approach:

1. Create new Xcode project with Everlayout and Alamofire as dependencies.
2. Enable background refresh in the app’s capabilities.
3. Setup a basic ExpressJS server to deliver the JSON layout file.
4. Get our ViewController to load the bundled layout JSON file when it loads.
5. Configure the app to fetch and save layout updates from our server for them to be applied when the app returns to the foreground.

Create new project

If you’re reading this post then I would expect that you know how to setup a new Xcode project and install the dependencies.

Info on Everlayout and Alamofire.

Enable background refresh

To have the layout update while the app is suspended, we need to enable the ‘Background Fetch’ capability. To enable this, open your project settings > Capabilities and toggle ‘Background Modes’. From the modes that are revealed, enable ‘Background Fetch’.

ExpressJS Server

Actually, any server that is capable of serving a JSON file is suitable for this. The truth is, I used an ExpressJS server because I already had one running! If you aren’t familiar with Node or ExpressJS, it’s far too much to get into here. But don’t worry, as long as you can serve a JSON file to your app over your network, you’re good to go.

Here is my route, for example:

The JSON that I am sending to the app is the description of a new UI to be fed into Everlayout. These layouts are extremely flexible and can completely change the way the app looks.

You can imagine here that instead of just returning the new layout, the server might determine things about the client beforehand and respond with a layout that is more catered to their needs, or specific test group.

ViewController

Since our app will only have one ViewController, I’ll use this file for loading and building the layout as well as making requests to our server for updates.

When we initially launch, the most up to date layout file will be the one we bundle with the app. After updates we will be loading layouts stored in our home directory.

Fetch updates

Finally we need to head over to the AppDelegate to tell our app to fetch layout updates while running in the background.

Conclusion

Being able to update an app design without even restarting the app is pretty cool!