Cordova is a framework to allow mobile apps to be written using web technologies. Cordova provides hooks into the mobile device APIs which allows the web app to access the same feature set as a native app. The apps are displayed using webview on the device.
Cordova apps are fast to write but tend to be slower than native apps.
Cordova used to be very popular with about 30% Market share in 2019, however as of 2022 its market share has dropped to just 10% as Flutter and React Native have gained in popularity. That being said there is still a place for Cordova in 2024.
Source: https://www.statista.com/statistics/869224/worldwide-software-developer-working-hours/
Cordova is great for:
- Apps that need to be built fast
- MVPs
- Apps that are not performance critical
- Apps that need to be built by someone who only knows web technologies
Setting up Cordova is not trivial and the exact versions of each piece of the stack are important to get right. The official instructions for setting up Cordova are not always up-to-date. This guide outlines how to set up Cordova for development with Android on Windows as of 2024.
What you will need:
- NodeJS
- Cordova
- Java Development Kit (JDK)
- Android Studio
- Gradle
Step 1: NodeJS
Download and install NodeJS https://nodejs.org/en/download/ if it is not already installed on your system. Version 18 or later is required.
Step 2: Cordova
From a command prompt issue this command to install Cordova globally (-g) on your system:
npm install -g cordova
This should install Cordova 12.x.x.
You can check what version of Cordova is installed by issuing the command:
cordova - version
Step 3: Java Development Kit
Download and install the Java Development Kit v11. Do not install the latest version of Java. This does not work with the Cordova build chain.
https://www.oracle.com/java/technologies/javase/jdk11-archive-downloads.html
Step 4: Android Studio
Download and Install Android Studio https://developer.android.com/studio
The exact version does not matter. At the time of writing the latest version was Android Studio Hedgehog (2023.1.1)
Step 5: Gradle
Download and Install Gradle 7.6.3 https://gradle.org/releases
Gradle does not come with an installer so the zip file just needs to be extracted. Do not install newer versions of Gradle.
I install this at C:\Gradle\gradle-7.6.3
Step 6: Set up Environment Variables
Open the Environment Variables Editor. From the start menu search for “Edit the system environment variables”. It does not matter if you add these as user variables or system variables.
CORDOVA_JAVA_HOME C:\Program Files\Java\jdk-11JAVA_HOME C:\Program Files\Java\jdk-11ANDROID_HOME C:\Users\<username>\AppData\Local\Android\SdkANDROID_SDK_ROOT C:\Users\<username>\AppData\Local\Android\Sdk(replacing <username> with your username)
Add the following options to the PATH variable
%ANDROID_SDK_ROOT%\tools%ANDROID_SDK_ROOT%\platform-tools%ANDROID_SDK_ROOT%\tools\emulator%ANDROID_SDK_ROOT%\cmdline-tools\9.0\bin%ANDROID_SDK_ROOT%\build-toolsC:\Program Files\Java\jdk-11\binC:\Gradle\gradle-7.6.3\bin
Note: Variables are not automatically updated in command prompt windows. The windows will need to be closed and re-opened for the variables to take effect.
Step 7: Android SDK
Configure the Android SDK. This will download a lot more files and may take some time.
Version 12 of Cordova only supports the Android SDK up to version 33. Install all the versions of Android you wish to support
(I do not recommend going below version 10).
- Open Android Studio Tools> SDK Manager
- Tick Android 13.0 (“Tiramisu”) > “Android SDK Platform 33”
- Tick Android 12L (“Sv2”) > “Android SDK Platform 32”
- Tick Android 12.0 (“S”) > “Android SDK Platform 31”
- Tick Android 11.0 (“R”) > “Android SDK Platform 30”
- Tick Android 10.0 (“Q”) > “Android SDK Platform 29”
- On the SDK Platforms page untick “Hide Obsolete Packages”
- Android SDK Build-Tools 34 > 33.0.2
- Android SDK Command-line Tools (latest) > Android Command-Line Tools 9.0
- Android Emulator
- Android SDK Platform-Tools 34.x.x
- Android SDK Tools (Obsolete) 26.x.x
Step 8: Phone
Set up your phone as the development target.
Enable development mode by going into settings and finding the “About” section then “About Phone” and finally scrolling down to the build number.
Next, tap on the build number field 7 times.
Next, go into Settings and System. There will be a new menu item “Developer Options”. You may have to dig for this as it lives in different places on different models of phone.
Ensure “Developer options” is enabled as well as “USB Debugging”
When you plug your phone into your computer, you may be asked to allow Debugging. Click Yes to this. You may also be asked to select what happens when you plug your phone into the computer. Choose “File transfer” if asked.
Step 9: Check the setup
The easiest way to validate the setup is by creating a demo project and using the built-in Cordova checking tool.
cordova create hello com.example.hello HelloWorldcd hellocordova platform add android
Plug in your phone via USB to use as the target device.
cordova requirements
If everything is set up correctly you should be ready to start Cordova development.