Phonegap / Cordova + AppCache
Cordova is great, right? Develop once, run everywhere etc etc. But what about updates? What about being backward compatible with all the new web services you are developing on the site, packaging the app and worrying about versions… no, we web developers can’t stand it.
First order of business – how to do updates. Common misconception is that traditional binary app stores (ios/android) don’t want the apps to self-update. It’s actually not true – you are allowed to self-update as long as the code you are updating runs in WebView. Bingo!
There are solutions on the market that give you such self-update mechanism, for example WorkLight that was recently acquired by IBM. It’s really not terribly hard to write this yourself if all you need is updates – get a zip file with all html/css/whatnot, download when application starts, extract, then actually render the UI.
However, there exists a system that is designed to do just that, and it’s arguably pretty good at that. The support for AppCache is very good both on modern desktop and mobile. The only question is how you’d use AppCache with Cordova.
Well, obviously your app can be a web site. Or web site can be the app… It’s really the same for web developers. I call most of the sites I create applications, because they are applications, from the customer point of view. Plus they can be pinned / clipped / made into an icon
public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); super.init(); // Initialize appView, since it's only initialized inside loadUrl by default android.webkit.WebSettings settings = super.appView.getSettings(); // get WebView settings String appCachePath = this.getCacheDir().getAbsolutePath(); // Set path to appcache settings.setAppCachePath(appCachePath); settings.setAllowFileAccess(true); // Let browser write files - doesn't work without this settings.setAppCacheEnabled(true); // Enable app cache super.loadUrl("file:///android_asset/www/index.html"); }
<!DOCTYPE html> <script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script> <script> function onBodyLoad() { document.addEventListener("deviceready", function(){ location.href = "http://192.168.2.108/offline/"; }, false); } </script> <body onload="onBodyLoad()"></body>
Actually using Cordova APIs
One caveat is that at least on Apple AppStore the wrapped site has to be more than site. It has to have some additional functionality that is not available via the web. And that’s where Cordova APIs come to the rescue, with access to all the interesting APIs a regular WebView/UIWebView doesn’t have access.
The first thing you have to do is detect that web site was opened from inside Cordova. It doesn’t look like there’s currently an API in cordova.js to tell us it loaded inside the Cordova web view. The only semi-working solution is to detect that onDeviceReady didn’t fire – but you have to wait to determine this fact, and that will delay your page loading in regular browser. Easier way is to pass some querystring parameter, url?fromcordova=true , and then include javascript and execute ondeviceready handler based on this parameter.
Second, cordova javascript actually has two versions – one for iOS and one for Android (and I am assuming others for other platforms). File name is same, content is different. The reason is that on iOS it’s using custom URL handler gap:// to communicate with Objective-C side. On Android, it’s overriding exec, prompt and alert methods in JavaScript and then on Java side in DroidGap class it’s intercepting these calls and actually using them to interact with JavaScript side (especially prompt, that can return data back to JavaScript). So the platform ID has to be another parameter in your URL, for example: url?fromcordova=true&platform=iOS
Note: the above setup instructions are for Cordova 2.0.0 – in previous versions some things still had PhoneGap names.
There are tons of things to learn in all that new tech, and I will try to write about it – most of the user-created code can be found in 
