Published on 2017 - 01 - 03

This is where Cordova enters the picture. Cordova is an open source framework that lets you convert HTML, JavaScript, and Cascading Style Sheets (CSS) into a native application that can run on iOS, Android, and other mobile platforms. Cordova uses a native “wrapper” around a web view (think of it as an embedded browser), commonly called a hybrid mobile application. It also provides access to hardware features like the camera and accelerometer. Unlike a simple web page, Cordova applications can be found (and sold!) in app stores just like native-developed applications.

What Cordova provides

The Cordova project consists of three main features: a command-line tool, access to hardware features, and the ability to support future features.

Command-line tool

The command-line tool is used to create projects and compile code to mobile platforms. It takes your source HTML, CSS, and JavaScript and converts them into the native binary required for the platforms supported by Cordova. You’ll also use the command-line tool to add support for the features your application uses. The command-line tool can also be used to send your code to either a simulator or a real device. Don’t worry if you aren’t necessarily a command-line tool ninja. The commands you use day-to-day are relatively simple and you’ll quickly become familiar with them.

Hardware access

Cordova provides access to various features of the mobile device. For the most part, these are all things that you can’t do with “regular” web apps running in the mobile browser. Cordova essentially extends what you can do in JavaScript to give you additional APIs to use in your code. Table 1.1 is a list of these APIs and what they provide.

Name Description Possible Uses
Battery Status Reports on battery-level change and low levels Warning when the battery is low and prompting the user to save
Camera Provides access to the camera as well as the user’s existing pictures Taking and sharing pictures
Contacts Searches, creates, edits, and removes contacts Letting the user find a contact to receive a message from the app
Device Reports on the device name and OS Providing options for iOS versus Android
Device Motion and Orientation Detects device movement and orientation Detecting a shake to reload data
Dialogs and Vibration Provides visual, audio, and tactile feedback Using an alert (visual and audio) to warn a user
File and FileTransfer Accesses the device’s filesystem and upload or download files Downloading assets to the device for updates
Geolocation Reports where the device is located Reporting on the user’s location and finding nearby resources
Globalization Localizes values (dates, numbers, and currencies) to local version Displaying dates the right way for any country
InAppBrowser Creates a popup browser Providing documentation for your app
Media and Media Capture Records audio and video Letting users share videos
Network Information Determines connection status Warning the user when they go offline
Splashscreen Provides splash-screen support Displaying a splash-screen on initial launch and updates
Statusbar Manages the status bar in Android and iOS Specifying an overlay or color value
Whitelist Specifies what remote resources are allowed Helping prevent security issues from user-created content

Plugin support

What about device features not listed here? At the time this chapter was written, the next iPhone hadn’t been announced. When it is unveiled, it’s possible (but probably not likely) that it will include an attached cowbell. How would you use this new hardware feature from a Cordova application when it isn’t supported? Cordova has a plugin API that lets you support anything the device supports. It requires that you write custom native code, but once you’ve done that and paired it with a corresponding JavaScript library, other developers can then easily use the cowbell from the application. Even better, you could then share this code with others so they too can make use of the cowbell in their applications.

What Cordova doesn’t provide

You’ve already seen that Cordova provides a set of APIs as well as the ability to write your own features not yet supported. But what doesn’t Cordova give you out of the box? The main thing Cordova doesn’t do is provide a UI framework for your development. That means that Cordova will take your HTML, as you code it, and put it on the device. The HTML (and CSS, of course) you create may not be mobile optimized, and therefore it may be difficult for people to use on a device. Buttons may be too small to click and text may be hard to read. Cordova won’t “magically” fix these issues for you. Luckily, there are multiple solutions. As an example, the Bootstrap framework ( can be used with your Cordova project to easily make your application more mobile friendly.