Under the Hood of Native Web Apps for Android

The Mobile Web Application

For years the mobile development experience has been a game of “my widgets are cooler than your widgets.”

Or “My development environment is faster than yours”.

The truth is that quality applications often take a lot of time and energy to write well. Sure, the first 90 percent may go quickly enough using — particularly if you are using the latest tool or framework — whichever it is — it doesn’t reall matter. It’s the “second 90 percent” that takes time and talent.

You still need to know how things work under the hood — one day you will find yourself in a corner and have to code your way out of it.

So if you are going to invest in some development skills, where do you spend that capital? How about web technologies?

Web as a better Widget

On the premise that every platform takes time and sweat to learn and become proficient in, why not invest in a set of skills that are nearly universally applicable?

Web technologies present a very compelling environment for a developer to invest their time and talent in. If you learn web skills, you can build some pretty exciting and useful applications today — and for multiple platforms including: desktop, enterprise, and yes, even mobile.

A “web” application makes a lot of sense when you are connecting to a web server — either an “Internet” application or an Enterprise “intranet” application. In these applications the value is generally found in the backend database and/or corporate business data sources. But what if our application is largely “client” oriented — the kind of apps you might buy in an app store? Does it make sense then? Sure thing.

Taking it Native

Web applications can provide remarkably sophisticated user interfaces thanks to powerful rendering engines as CSS capabilities continue to expand — and the canvas tag is quite capable in and of itself. Javascript is a challenging yet profoundly powerful programming environment, enabling a wide array of applications — much more than just “form validation scripts”. And Ajax can bring in pieces of data from servers when and if they are required.

OK, but my cool mobile device has GPS, a Camera and an MP3 player. And an SQL database. Can those features be leveraged also? Yes.

I want my application in the app-store, can I package it up and sell it? Yes.

So how does this work? By taking the web native.

In previous articles, we have discussed the merits of projects such as PhoneGap and Appcelerator Titanium. These environments permit developers to write applications in HTML, CSS and Javascript — for all of the reasons listed above and more. And they give access to the “native” APIs like GPS, Contacts, Camera, etc. Once the application is ready, it can even be submitted to the app store of choice for distribution and to bring the developer fame and fortune.

In the balance of this column we are going to look at an ultra-simple native web application. It is not meant to compete with the more robust native web platforms like PhoneGap and Appcelerator — it is designed to take a peak under the hood of that kind of solution and show how it works. This example is for Android, though there are similar and analogous techniques for other platforms including iPhone, BlackBerry, webOS, etc. Let’s get started.

Granular WebKit

At the core, a native web application relies on an “embedded browser object”. In the Android world, this is known as a WebView view (or control), found in the android.webkit package. In fact, this package contains a number of classes exposing a variety of browser-related functionality. Using these classes remind me of the old “MasterMind” board game — a moment to learn, a lifetime to master. OK, so its not that hard, but there are a bunch of moving pieces to become familiar with. To describe some of these, we will look at a sample application which performs a couple of basic tasks:

• Write to the the Android Log, with separate functions for Info and Error level entries
• Exit the application

These functions are clearly not very exciting, but they are demonstrative of the bigger picture — writing an application in HTML, CSS and Javascript which interacts with the environment beyond the browser on the device.

By the way, if your only interest is to show an external webpage from your application, you would likely be better served to simply launch the on-device browser. Using the WebView control is meant for applications where you want to exercise more control over the functionality for your “on device” or native application.

As exhibit A, demonstrating that our application is indeed a native application, here is a screen shot of the application icon on the Android launcher screen.

The code for the application, named GoingNative, is available on the Linux Magazine Mobile code hosting site.

The Application

The application presents a very simple user interface including a title, a piece of text in a heading tag, a single input form element, three buttons and a static image. The html file and the image are both packaged in the apk file — there is no need to go to the Internet to run this “native web” application. The image below shows the project in an Eclipse workspace.

And here is a screen shot of the application in action.

Note that this image has the application running in the emulator. The screen in the background is showing a portion of the DDMS perspective in Eclipse. We can see that the application com.msi.linuxmag.goingnative has a process id of 2723 and in the lower portion of the shot we see a couple of entries from our application. We’ll see how those came to be in the log in a moment.

Let’s see how this application is constructed. We’ll start with the HTML.