Native looking web apps for iPhone and Android

Developing mobile applications can be a frustrating exercise.

In particular, if you want to develop a native app for an Apple device, you have one choice of programming language (Objective C), one choice of IDE (Xcode), and one choice of operating system (OSX). Before you can write a single line of code, you need to purchase a Macintosh computer, and register as an Apple Developer. Testing must be done in an emulator or on the native device. After you finish your work, it needs to go through the somewhat arbitrary App Store approval process. Finally, if you want to port it to another platform, you can expect to rewrite large amounts of code.

Fortunately, there is another way which allows you to use your existing development tools and skills. Every mobile device has a browser. You can create a web application using any combination of web development tools and techniques you're already familiar with.

You might be concerned that this approach won't look and feel like a native app. Maybe you are worried about being able to use all the hardware peripherals in the device such as GPS? Or, possibly you're unsure about the performance of a user interface driven by Javascript?

I'll address these concerns, but first, here's an example. This is a rapid prototype I developed for our sales team. Our company designs and manufactures rack-mounted radio base stations. Our distributor wanted to demonstrate the monitoring capabilities to potential customers using an iPad.

Native look and feel

As you can see from the video, it's possible to very closely replicate the native iOS look and feel in a web application. I used a framework called iWebKit, which is a painstakingly crafted and maintained set of CSS styles. Applying the styles to your app is as simple as assigning the correct classes to elements in your UI design. There are similar options for Android too, like NativeDroid.

Apart from fonts, colours etc, there are a few other small considerations which are also easily taken care of. Firstly, the viewport can be configured using a Safari specific meta-tag (or the equivalent for Android). This allows you to hide the address bar and navigation buttons, set the screen orientation, and fix the UI dimensions to the native resolution of the device. These all go a long way towards making the app feel native.

Finally, it's easy and recommended to supply desktop icons for your app, so that it looks like any other app installed on the phone. Here's how to do it on iOS and Android.

Hardware peripherals

With HTML5, there are many powerful APIs available to applications in the browser. Geolocation (GPS), audio, hardware accelerated 3D graphics, battery monitoring and offline storage just to name a few. Unless your app requires unusual functionality, chances are that a web application will be able to access the hardware functions required.

Performance

Modern mobile devices are very powerful. The ARM based microcontrollers in smartphones can clock over 1 GHz, have multiple cores, hardware accelerated graphics and access to gigabytes of RAM. Not so long ago, those kinds of specs were found in new laptop computers.

Javascript has also come a long way. Google in particular has a major vested interest in Javascript performance and developed the V8 Javascript engine.

These changes add up to mean that almost any browser app will perform snappily on a mobile device.