How to reload UI of Cordova app without updating app

Question

We are currently in the early stages of researching whether to use an HTML5/Angular/Cordova hybrid solution for a fairly large and complex business application. One thing that is problematic is the significant difference in approval times between Android and iOS. We also very much like the idea of code once deploy to a website and to mobile. We are less concerned with the UI uncanny valley problem at this point.

I've read that some applications, such as Netflix, dynamically update the UI without updating the application itself. That sounds like a great way to get around the headache of deploying a new application version every time there is a release. If we could cache the UI entirely until such time that there is, in fact, an update to the website. Our application will be supporting offline data storage in the case of network issues with commits via REST service and we don't want to request the UI with each load of a particular page/route/template so a simple webview loading a page from the server isn't what we want.

I've searched fairly extensively but haven't found anything detailing how to accomplish this. Perhaps you could point me in the right direction to some examples you've found? Or perhaps I'm on a wild goose chase and you can tell me that too.

Answer 1

You're specifically mentioning Angular, so I'm not sure this solution will fit your needs, but the approach that's worked for me is to use jQuery Mobile as the framework and then render the UI programmatically when the app launches based on JSON data retrieved from a web service. For example, say your main page has 2 buttons on it, "Yes" and "No". You'd start with an empty page in your index.html:

<div data-role="page" id="pageMain" data-title="Main">
    <div data-role="content">
        <div id="myContent">
        </div>
    </div>
</div>

And let's say when you retrieve your JSON UI data from the server at startup you get this:

[
    { "ControlType": "button","ControlName": "btnYes","Label": "Yes" }
    { "ControlType": "button","ControlName": "btnNo","Label": "No" }
]

You'd create your UI elements based on the JSON data and set the innerHtml content of the myContent div to end up with:

<div data-role="page" id="pageMain" data-title="Main">
    <div data-role="content">
        <div id="myContent">
            <button id="btnYes">Yes</button>
            <button id="btnNo">No</button>
        </div>
    </div>
</div>

Additionally you can get very specific with your layout by also retrieving the CSS from the server and inserting it inline into the index.html via <style></style> tags. Obviously this is a dirt-simple example, but that's the basic concept and I'm using it in production apps.