Cordova wrapped a web page in Apache Cordova 129 , and Framework7 built BookNest as a full Framework7 572,986 web app. This chapter joins the two ideas with Capacitor 243,123 , the native runtime from the Ionic 20,753 team. Capacitor takes the web app you already have, places it inside a WebView in a real Android Studio 234 project and a real Xcode 10 project, and gives your JavaScript a typed, promise-based bridge to native code. The web app stays a web app: you build it with Vite 25,978 or any other bundler, and Capacitor copies the result into the native projects.
Much of the model will feel familiar after Cordova. There is still a WebView, still a bridge, and still a catalog of plugins for the camera, the filesystem and notifications. What changes is who owns the native code. Cordova regenerates its platforms/ directory from config.xml; Capacitor generates android/ and ios/ once and then hands them to you as source files that you edit, commit and review like any other code. That one decision explains most of the differences you will meet in this chapter, from plugin installation to upgrades.
The chapter follows a web app all the way to the Play Console 1 . You start with the toolchain and the capacitor.config.ts file, learn the CLI workflow (add, sync, run), and look under the hood at how a call from JavaScript reaches Kotlin or Java and comes back as a resolved promise. You then use the official plugins, survey the community and Capawesome 178,914 ecosystems, write a small custom plugin, and run Cordova plugins inside Capacitor. The demo packages Framework7's Framework7 BookNest as an Android app and runs it on the emulator.
Capacitor 8 is the current major version, and its Android module needs JDK 21, one version newer than the JDK 17 that the other chapters use. Every Android build in this chapter ran for real on that toolchain, and every screenshot comes from the Android emulator. iOS steps are taken from Apple's and Capacitor's documentation and are marked (Not Run Here), because building for iOS needs a Mac with Xcode.
What you will learn:
What Capacitor is, where it came from, and when to choose it over Cordova or React Native 36,878
The Node, Android SDK, JDK and Xcode versions Capacitor 8 requires, and how to check them
How to add Capacitor to a web app, configure it, and drive the npx cap workflow
How the JavaScript-to-native bridge dispatches plugin calls and returns results
How to use the official plugins, judge community plugins, and write your own
How to run Cordova plugins in Capacitor and migrate a Cordova app
How to package the Framework7 BookNest app for Android and debug it
How to handle live updates, deep links, push notifications and secure storage
How to sign, build and publish a release, and how Capacitor compares with its alternatives
Sections
- Introduction to Capacitor
- Toolchain Requirements
- Creating an App
- CLI and Workflow
- Native Projects as Source
- How the Bridge Works
- Device, UI and System Plugins
- Notifications and Sharing
- Community Plugins
- Custom Plugins
- Migrating from Cordova
- Framework7 on Capacitor
- Ionic Framework
- Live Updates and CI/CD
- Links and Push with FCM
- Secure Storage
- Debugging and Testing
- Building and Publishing
- Capacitor vs Alternatives
- Test Yourself!