How Cordova Works

Cordova is an application container that runs natively on supported mobile devices. The container wraps a web application that you write using standard HTML, CSS, and JavaScript. Figure 25.1 provides an overview of how Cordova works.

FIGURE 25.1 Cordova is a native application container for a web application. It provides access to the native device capabilities through plug-ins.

The Cordova application container wraps a web view that takes up the entire screen of the application. This web view uses the native operating system’s web view container (UIWebVew in iOS, android.webkit.WebView in Android, and WebView in Windows and Windows Phone). Each of these web views provides different web view rendering engines based on operating system and version. This means that building a Cordova application is similar to building a website targeted to a mobile device. You must account for differences in the DOM implementation within your HTML, JavaScript, and CSS. The good news is, like website development, you can take advantage of the frameworks that help you do this already, such as Bootstrap, jQuery, Angular, and more (see Chapter 18).

Your Cordova app gets compiled to a native application on the target device. For iOS, this is an .ipa (iPhone Application Archive), for Android an .apk (Android Application Package), and for Windows an .xap (x-Application Package). Cordova packages your application as a native app that can then be installed as any other native application. Remember, this native application wraps a web view and then runs your application like a hosted web page.

Cordova provides plug-ins that work as native device APIs for calling on device-specific features such as the camera, GPS, network, and sound. These plug-ins work to abstract the per-device complexity and serve as an interface between your application and the native device. Cordova ensures the APIs are consistent across device. This means you can write your code (as JavaScript) once, and it will work on each device thanks to the Cordova APIs.

The Cordova framework does not provide special user interface (UI) components for building your applications. Instead, you get the browser’s HTML rendering. However, like a website, there are many tools out there that you can use to make your UI look more native on a device. We will look at some of these in coming sections.