Building Android Apps with HTML, CSS, and JavaScript

Chapter 7. Going Native

Our web app can now do many things that a native app can do: launch from the home screen, store data locally on the phone, and operate in offline mode. We’ve formatted it nicely for the device and set up native-looking animations to provide feedback and context to the user.

However, there are still two things that it cannot do: it can’t access the device features and hardware (e.g., geolocation, accelerometer, sound, and vibration) and it can’t be submitted to the Android Market. In this chapter, you will learn how to extend the reach of your web app beyond the normal confines of the browser using an open source project called PhoneGap.

Introduction to PhoneGap

The mobile landscape is littered with devices, platforms, and operating systems. If you are a web developer, you might be familiar with the agony of testing 10 or so browser versions across 10 or so operating system versions. Multiply that by 100 and you have mobile. There is simply no cost-effective way to develop and test across all of the possible combinations.

Enter PhoneGap. PhoneGap is an open source development tool created by Nitobi that acts as a unified bridge between web apps and mobile devices. It essentially consists of a native app project template for each of the major platforms, where each project is just a chromeless web browser with heightened permissions. What this means in concrete terms is that PhoneGap makes it possible to add a single snippet of JavaScript to your web app that will ...