Capacitor allows Javascript web apps to act like native Android/iOS apps.
It wraps your web code into a native WebView app to "simulate" a mobile app, while offering native phone functionalities like camera and push notifications.
Capacitor DOES NOT support running from a different "computer" from where you have the Android SDK installed.
WSL is like a "linux virtual machine" with limited access to your windows computer, and your project is there, so Capacitor can't run your project on windows as it lives in the "linux VM" (WSL).
There is a third party project that leverages adb to move and launch the app in windows https://github.com/leo-petrucci/run-cap-on-android
To develop Android applications using Capacitor, you will need:
- Android Studio.
- An Android SDK for the platform version you want to target. (
Android Studio > Settings > Frameworks > Android SDK)
| Version | Codename | SDK / API level | Release | Cummulative share |
|---|---|---|---|---|
| Android 14 | Upside Down Cake | 34 | 2023 | 16.3% |
| Android 13 | Tiramisu | 33 | 2022 | 42.5% |
| Android 12 | Snow Cone | 32 / 31 | 2021 | 59.5% |
| Android 11 | Red Velver Cake | 30 | 2020 | 75.7% |
| Android 10 | Quince Tart | 29 | 2019 | 84.5% |
| Android 9 | Pie | 28 | 2018 | 90.2% |
You do not need to separately install the Java Development Kit (JDK). Android Studio will automatically install the proper JDK for you.
- Install capacitor in the same directory.
- As a new project.
npm init @capacitor/app
-
In an existing app. Requirements:
- A
package.jsonfile. - A separate directory for built web assets such as
distorwww. - An
index.htmlfile at the root of your web assets directory.
- A
npm i @capacitor/core
npm i -D @capacitor/cli- Initialize the app.
npx cap init
- Install platforms i.e. added as dependencies to
package.json.
npm i @capacitor/android @capacitor/ios
- Create Android/iOS native projects. Adds an android/ios folder.
npx cap add android
npx cap add ios
# npx cap add electron- Start local dev server.
npm run start- Build the web files/bundles.
npm run build- Sync web code to native project.
- Copies over your built web bundle to both your Android and iOS projects as well as update the native dependencies that Capacitor uses.
npx cap sync- Android studio > run/refresh the app.
They need to be installed before using.
There are official ones...
npm install @capacitor/camera
npm install @capacitor/haptics
And community ones.
https://github.com/capacitor-community
https://github.com/capawesome-team/capacitor-plugins
Capacitor has support for most Cordova plugins.
https://github.com/danielsogl/awesome-cordova-plugins
https://danielsogl.gitbook.io/awesome-cordova-plugins
npm install @awesome-cordova-plugins/core --save
You can test the app by:
- Connecting via cable.
- Connectin via WI-FI.
- Emulator.
WI-FI
Android:
-
Go to pair devices over WI-FI.
-
select the
pair using pairing codetab.
Phone:
-
Enable Developer options.
- Go to
About phone > Software information > Build number. - Tap the Build number field 7 times. You will begin seeing a message as you approach the 7 touches.
- Go to
-
Developer options will now appear in Settings.
-
Go to
Developer options > Wireless debugging. -
Tap
Pair device with pairing codeand input the code in Android Studio. -
Android Studio > run the app.
-
It will show up on your device.
Capacitor does not offer a way to build native apps on the command line. Platform-specific CLI tools or an IDE should be used instead.
After syncing, open your target platform's IDE to compile your native app:
- Android Studio for Android.
- Xcode for iOS.
Android
-
Open
Android Studio -
Go to
Build > Build App Bundle (s) / APK (s) > Build APK (s) -
Locate .apk in
capacitor-project/android/app/build/outputs/apk/debug
Android
./app/android/app/src/main/AndroidManifest.xml