Capacitor — Build Cross-Platform Apps with Web Technologies

Introduction

Capacitor is a cross-platform app runtime created by the Ionic team. It wraps any web application in a native container, providing access to device APIs through a consistent JavaScript interface while letting developers ship to iOS, Android, and the web from a single codebase.

What Capacitor Does

• Wraps web apps in native iOS and Android shells with full App Store distribution support
• Exposes native device APIs (camera, filesystem, geolocation, push notifications) via JavaScript plugins
• Supports any web framework including React, Vue, Angular, Svelte, or plain HTML/JS
• Enables Progressive Web App deployment alongside native apps from the same codebase
• Provides a plugin system for writing custom native functionality in Swift, Kotlin, or Java

Architecture Overview

Capacitor runs your web app inside a native WebView (WKWebView on iOS, Android WebView on Android) and bridges JavaScript calls to native code through a message-passing layer. Each plugin registers native handlers that the bridge invokes when the JS API is called. Unlike Cordova, Capacitor treats native projects as source artifacts you check into version control, giving full access to native IDE tooling and build configurations.

Self-Hosting & Configuration

• Initialize with npx cap init and configure app ID and name in capacitor.config.ts
• Add platforms with npx cap add ios or npx cap add android to generate native projects
• Run npx cap sync after web builds to copy assets and update native dependencies
• Configure server URL, plugins, and platform-specific settings in capacitor.config.ts
• Open native projects in Xcode or Android Studio for platform-specific configuration and debugging

Key Features

• Native project ownership means you can add any native SDK or CocoaPod/Gradle dependency directly
• Live reload during development with npx cap run ios --livereload for rapid iteration
• Backward-compatible plugin API that works across Capacitor major versions
• First-party plugins for core device features maintained by the Ionic team
• Community plugin ecosystem with hundreds of plugins for Bluetooth, biometrics, payments, and more

Comparison with Similar Tools

• React Native — renders native UI components; Capacitor renders web UI in a WebView, enabling any web framework but with WebView performance characteristics
• Flutter — uses Dart and a custom rendering engine; Capacitor uses standard web technologies developers already know
• Cordova — Capacitor is its spiritual successor with native project ownership, modern plugin API, and active maintenance
• Tauri — targets desktop with a Rust backend; Capacitor focuses on mobile with iOS and Android as first-class targets
• Expo — React Native toolchain; Capacitor is framework-agnostic and works with any web framework

FAQ

Q: What is the performance difference between Capacitor and React Native? A: Capacitor apps run in a WebView, so complex animations may not match native rendering. For content-driven and form-heavy apps, the difference is minimal. For graphics-intensive apps, React Native or Flutter may be better suited.

Q: Can I use Capacitor without Ionic Framework? A: Yes. Capacitor is framework-agnostic. You can use it with React, Vue, Svelte, plain HTML, or any web technology.

Q: How do I access a native API that Capacitor does not support? A: Write a custom Capacitor plugin in Swift (iOS) or Kotlin/Java (Android) and call it from JavaScript through the plugin bridge.

Q: Does Capacitor support background tasks and push notifications? A: Yes. First-party plugins provide push notifications via Firebase and APNs, and community plugins add background fetch, geofencing, and background tasks.

Sources

• https://github.com/ionic-team/capacitor
• https://capacitorjs.com/