Cordova Tutorial: Learn Hybrid Mobile from Scratch (2026)
Apache Cordova is the grandparent of hybrid mobile frameworks. Before Capacitor, before Ionic's own engine, there was Cordova — an open-source wrapper that lets you build mobile apps with HTML, CSS, and JavaScript by embedding your web app in a native WebView. I built my first mobile app with Cordova in 2014, and while the ecosystem has evolved, Cordova remains relevant for teams that want a lightweight wrapper without the overhead of a full framework. This tutorial reflects the practical lessons from shipping several Cordova apps, including the quirks of plugin compatibility and WebView behavior across Android and iOS versions.
Cordova CLI and Project Setup
Install Cordova globally with npm install -g cordova. Create a project with cordova create MyApp com.example.myapp MyApp — the three arguments are the directory name, the app ID (reverse-domain style), and the display name. This creates a www/ folder for your web assets, a config.xml for app metadata, and a hooks/ directory for build scripts. Add platforms with cordova platform add android or cordova platform add ios. The first time you add a platform, Cordova downloads the native project templates and build tooling. Test with cordova run android on an emulator or connected device.
npm install -g cordova
cordova create MyApp com.example.myapp "My App"
cd MyApp && cordova platform add androidConfig.xml and Project Structure
The config.xml file is the heart of a Cordova project. It defines the app name, version, description, icon, splash screen, and the set of plugins used. You specify allowed navigation origins with . The www/ directory contains your web app — index.html, CSS, JavaScript, and assets. Cordova loads index.html in a full-screen WebView that fills the device screen. The native project files live in platforms/android/ and platforms/ios/, but you should never edit them directly — they are regenerated on each cordova prepare.
My App Sample Cordova app
Plugins and Device APIs
Cordova plugins bridge JavaScript to native code. The cordova-plugin-camera lets you take photos or pick from the gallery. cordova-plugin-geolocation accesses GPS. cordova-plugin-file provides file system read/write. cordova-plugin-network-information monitors connectivity. Install a plugin with cordova plugin add cordova-plugin-camera. Plugins expose JavaScript APIs that return results via callbacks or promises. The key thing I learned: always check plugin compatibility with the latest platform versions. A plugin that worked on Android 12 might need updates for Android 14's new permission models.
navigator.camera.getPicture(
(imageData) => { document.getElementById('img').src = 'data:image/jpeg;base64,' + imageData; },
(err) => console.error(err),
{ quality: 50, destinationType: Camera.DestinationType.DATA_URL });Custom Plugin Development
When existing plugins do not cover your needs, write a custom plugin. Create a plugin with cordova plugin create my-plugin. A plugin has a plugin.xml manifest, a www/ folder with the JavaScript API, and src/android/ and src/ios/ folders with native implementations. On Android, the native side is a Java class extending CordovaPlugin that overrides execute. On iOS, it is an Objective-C class extending CDVPlugin. The JavaScript side calls cordova.exec(success, fail, service, action, args) to invoke native methods. Add the plugin to your project with cordova plugin add path/to/plugin.
public class MyPlugin extends CordovaPlugin {
public boolean execute(String action, JSONArray args, CallbackContext cb) {
if (action.equals("echo")) { cb.success(args.getString(0)); return true; }
return false; } }UI Frameworks and Optimization for Cordova
Cordova gives you a blank WebView, so you need a UI framework for native-looking interfaces. Onsen UI and Framework7 were built specifically for Cordova apps. Onsen UI provides Material Design and iOS components with smooth animations. jQuery Mobile and Sencha Touch are older options but still functional. Performance in Cordova requires attention: minimize DOM manipulation, use CSS3 hardware-accelerated animations (translate3d, opacity), avoid slow jQuery selectors in favor of native DOM APIs, and lazy-load images. The WebView on Android (Chrome-based via Android System WebView) and iOS (WKWebView) have excellent JavaScript engine performance, but DOM rendering is still the bottleneck.
Cordova App
Item 1 Building, Signing, and Distribution
Build your release app with cordova build android --release. This produces an unsigned APK or AAB. For Android, sign it with jarsigner or set up Gradle signing in build.gradle. For iOS, open the Xcode project from platforms/ios/, configure signing, and archive. Cordova does not provide a CI/CD pipeline itself — integrate with App Center, GitHub Actions, or Bitrise for automated builds. A crucial step: test the release build on real devices. The WebView in release mode might behave differently than in development mode due to JavaScript optimizations and lack of debugging capabilities.
cordova build android --release
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore app-release-unsigned.apk alias_nameFrequently Asked Questions
What is the difference between Cordova and Capacitor?
Capacitor is the modern successor by the Ionic team. Both wrap web apps in a native WebView, but Capacitor uses a more modern plugin API, has better native project integration, and supports progressive web apps. Cordova is stable but no longer actively developed.
Can Cordova apps access all device features?
Most common features are covered via plugins: camera, GPS, accelerometer, contacts, file system, push notifications, and biometric auth. For obscure hardware features, you may need to write a custom plugin.
Why does my Cordova app look different on Android and iOS?
Each platform uses a different WebView (Chrome on Android, Safari on iOS) with different rendering engines and CSS support. Also, iOS applies default touch handling that affects scrolling. Use platform-specific CSS and test on both devices.
Is Cordova dead in 2026?
Not dead, but in maintenance mode. Apache still releases updates but new feature development has slowed. For new projects, consider Capacitor, which offers a similar concept with modern tooling, live reload, and better plugin ecosystem.
Originally published on Ayodhyyya. Last updated June 1, 2026.