Capacitor: From Web to Mobile Apps. Part 0. Why Use Capacitor?
Today we’re going to talk about Capacitor, a great tool for building hybrid mobile apps.
Let’s start with a plain definition:
Capacitor is an open-source runtime for building hybrid mobile apps for iOS, Android, and PWAs.
Fair enough, but why do we need it? It is most useful for teams that already have a web app and don’t have the time or money to rewrite the whole thing using native technologies or another cross-platform solution.
That’s exactly where Capacitor fits.
The problem
Suppose you have:
- An SPA built with React, Vue, Angular, or something similar.
- A business requirement to launch on the App Store and Google Play.
Your options:
- Rewrite everything as native apps. Expensive, time-consuming, and usually requires two teams. That won’t work for us.
- React Native. A viable option, but it comes with its own ecosystem, including Expo and Metro. You’ll still have to rewrite code because there’s no DOM.
- Flutter. Rewrite everything, and in a new language at that. That won’t work for us either.
- Package the web app and give it access to native APIs. This is where Capacitor comes in.
The fourth option tends to have a bad reputation, largely because of the legacy of Cordova.
Capacitor is an attempt to make this approach at least a reasonable choice, rather than the last thing you reach for when you’ve run out of options.
What Capacitor actually is
Architecturally:
- The app runs in a WebView.
- A bridge connects it to native APIs.
- The iOS and Android projects are full-fledged native projects with their own file structures.
The project structure looks roughly like this:
dist/: the web app's build output.ios/: the Xcode project.android/: the Gradle project.- Plugins: npm packages that connect JavaScript to Swift, Kotlin, or Java.
Important: Capacitor doesn’t hide anything from you. You can open Xcode or Android Studio at any time and write native code if you need to.
Why it isn’t Cordova 2.0
Cordova:
- Loaded plugins dynamically.
- Had an outdated API.
- Often broke when SDKs were updated.
- Made the native layer feel like a black box.
Capacitor:
- Generates full native projects.
- Uses modern iOS and Android APIs.
- Lets you write plugins as ordinary native modules.
- Keeps pace with platform updates.
Put simply, Cordova tried to hide the native layer; Capacitor makes it explicit.
Capacitor vs. native development
Capacitor isn’t a replacement for native development. But for most business apps, admin panels, marketplaces, customer-facing apps, and internal systems, the performance difference isn’t critical. The difference in development time and cost, however, can be substantial.
Capacitor vs. React Native
React Native makes you a mobile developer who writes JavaScript. Capacitor turns your web app into a mobile app.
These are fundamentally different approaches. Neither is better than the other; they solve different problems.
Why Capacitor is a viable choice now
A few things have changed:
- WebViews have been fast and stable for some time.
- Web frameworks can now handle offline use and cache data efficiently.
- TypeScript has become the standard.
- CI/CD for mobile apps is no longer unusual.
When Capacitor is a bad idea
- Games and graphics-intensive apps.
- Complex animations.
- Heavy dependence on proprietary SDKs.
- Requirements for the highest possible frame rates.
In these cases, choose native development or a specialized framework.
What’s next
This is the introductory article in a series about Capacitor. The next articles will be more hands-on:
- Migrating an existing web app to Capacitor, including React, Next.js, and Cordova projects.
- Writing your own plugin for Android and iOS, using an SMS plugin as an example.
- Delivering OTA updates with CapacitorUpdater and Capgo.
- Running a local language model inside the app.
- Using microfrontends in Capacitor: native API access, permissions, routing, and updates.
- Securing a Capacitor app: the WebView, native bridge, local data, and remote code.
That’s all from me. Feel free to ask questions in the comments or send me a message.
Links:
