Capacitor Native Runtime Cheat Sheet

Updated 2026-05-16

Next Topic: Compose Multiplatform Cheat Sheet

🧠Study flashcards on this topic134 cards · spaced repetition→

Capacitor is an open-source native runtime created by Ionic that enables developers to build cross-platform mobile applications using web technologies (JavaScript, HTML, CSS) and deploy them to iOS, Android, and the web. Unlike its predecessor Cordova, Capacitor treats the native project as a first-class citizen, embedding a standard WebView inside a native shell while providing a modern bridge architecture for seamless web-to-native communication. The runtime exposes a rich plugin system that wraps native device features like camera, filesystem, and geolocation through a unified JavaScript API, eliminating the need to write platform-specific code for common operations. A key mental model: Capacitor doesn't replace native code—it layers web capabilities on top, allowing developers to progressively enhance their apps with native functionality as needed while maintaining a single codebase across platforms.

What This Cheat Sheet Covers

This topic spans 18 focused tables and 178 indexed concepts, 134 flashcards. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.

Table 1: Core Architecture and Runtime ConceptsTable 2: Plugin Development and Custom Native CodeTable 3: Official Capacitor Plugins (Core APIs)Table 4: Platform Configuration and Project SetupTable 5: Live Reload and Development WorkflowTable 6: Web-to-Native Communication PatternsTable 7: iOS-Specific ConfigurationTable 8: Android-Specific ConfigurationTable 9: Plugin Permission and Native CapabilitiesTable 10: Deployment and DistributionTable 11: Cordova Migration and CompatibilityTable 12: Over-the-Air (OTA) Updates and Live DeployTable 13: Performance and OptimizationTable 14: Testing and Debugging StrategiesTable 15: Background Tasks and Service WorkersTable 16: Security and Data ProtectionTable 17: Advanced Native IntegrationTable 18: Common CLI Commands and Workflows

Quick IndexSubscribe to unlock

A jump-to index of every table row in this cheat sheet.

Mind MapSubscribe to unlock

An interactive map of every table and concept in this topic.

Table 1: Core Architecture and Runtime Concepts

These are the moving parts that make Capacitor work, and understanding how they fit together explains everything else. Your web app runs inside a native WebView container, the bridge ferries plugin calls back and forth between JavaScript and native code, and the CLI keeps a real, editable native project in sync with your built web assets.

Concept	Example	Description
Native Bridge	`CapacitorBridge.postMessage(data)`	• JavaScript-to-native communication layer using message passing • routes plugin calls from WebView to native code and returns results asynchronously via promises
WebView Container	`WKWebView` (iOS), `WebView` (Android)	• Standard platform webview component that hosts the web application • runs JavaScript engine and renders HTML/CSS content using native browser capabilities
Native Project	`ios/App.xcworkspace`, `android/app`	• First-class native application project created during setup • developers own and can modify directly in Xcode/Android Studio for custom native functionality
Plugin System	`import { Camera } from '@capacitor/camera'`	• Modular architecture for exposing native device APIs to JavaScript • plugins register methods that the bridge routes to platform-specific implementations
Capacitor CLI	`npx cap sync`, `npx cap run ios`	• Command-line interface for project initialization, platform management, and plugin installation • automates copying web assets to native projects
capacitor.config.ts	`appId: 'com.example.app'`, `webDir: 'dist'`	• Central configuration file defining app identity, platform settings, plugin options, and server URL • uses TypeScript or JSON format
Web Assets Bundling	`npm run build` → `npx cap copy`	Process of compiling web app and copying output to native project asset directories (`ios/App/public`, `android/app/src/main/assets/public`)
Native Runtime Initialization	`CAPBridgeViewController` (iOS), `BridgeActivity` (Android)	• Platform-specific entry point that creates WebView, loads bridge, and starts web app • occurs when native app launches

Table 2: Plugin Development and Custom Native Code

When the official plugins don't cover what you need, you write your own—and the pieces here are the anatomy of a Capacitor plugin. You define a TypeScript interface as the contract, annotate native methods so the bridge can call them, and provide parallel Swift and Kotlin implementations of the same API. Plugins can start life inside your app and later be extracted into a reusable npm package.

Technique	Example	Description
Plugin Class Definition	`@CapacitorPlugin(name = "Echo")` `public class EchoPlugin extends Plugin` (Android)	Annotated class extending platform base (`Plugin` for Android, `CAPPlugin` for iOS) that defines native plugin implementation and exposes methods to JavaScript

The rest of this section is part of the full cheat sheet

Table 3: Official Capacitor Plugins (Core APIs)

This is the everyday toolbox—the maintained plugins that cover the device features most apps actually reach for, from camera and geolocation to notifications, clipboard, haptics, and the native share sheet. Each wraps a platform API behind one consistent promise-based JavaScript call, so you ask for a photo or a GPS fix the same way on iOS, Android, and the web.

Plugin	Example	Description
Camera	`const image = await Camera.getPhoto({` `quality: 90,` `source: CameraSource.Camera` `})`	• Captures photos from device camera or selects from photo library • returns base64 data or file URI with configurable quality and source options

The rest of this section is part of the full cheat sheet

Table 4: Platform Configuration and Project Setup

Getting from a web build to running native apps comes down to a handful of setup steps and config knobs. Here you'll find the commands that scaffold the iOS and Android projects, the settings that establish app identity (bundle ID, app name, web directory), and the sync/copy/update commands that keep the native side current—plus the minimum OS versions Capacitor supports.

Configuration	Example	Description
iOS Project Creation	`npx cap add ios` `npx cap open ios`	• Generates Xcode project in `ios/` directory • creates workspace, configures bundle ID, and sets up CocoaPods or Swift Package Manager

The rest of this section is part of the full cheat sheet

Table 1: Core Architecture and Runtime Concepts

Concept	Example	Description
Native Bridge	`CapacitorBridge.postMessage(data)`	• JavaScript-to-native communication layer using message passing • routes plugin calls from WebView to native code and returns results asynchronously via promises
WebView Container	`WKWebView` (iOS), `WebView` (Android)	• Standard platform webview component that hosts the web application • runs JavaScript engine and renders HTML/CSS content using native browser capabilities
Native Project	`ios/App.xcworkspace`, `android/app`	• First-class native application project created during setup • developers own and can modify directly in Xcode/Android Studio for custom native functionality
Plugin System	`import { Camera } from '@capacitor/camera'`	• Modular architecture for exposing native device APIs to JavaScript • plugins register methods that the bridge routes to platform-specific implementations
Capacitor CLI	`npx cap sync`, `npx cap run ios`	• Command-line interface for project initialization, platform management, and plugin installation • automates copying web assets to native projects
capacitor.config.ts	`appId: 'com.example.app'`, `webDir: 'dist'`	• Central configuration file defining app identity, platform settings, plugin options, and server URL • uses TypeScript or JSON format
Web Assets Bundling	`npm run build` → `npx cap copy`	Process of compiling web app and copying output to native project asset directories (`ios/App/public`, `android/app/src/main/assets/public`)
Native Runtime Initialization	`CAPBridgeViewController` (iOS), `BridgeActivity` (Android)	• Platform-specific entry point that creates WebView, loads bridge, and starts web app • occurs when native app launches

Table 2: Plugin Development and Custom Native Code

Technique	Example	Description
Plugin Class Definition	`@CapacitorPlugin(name = "Echo")` `public class EchoPlugin extends Plugin` (Android)	Annotated class extending platform base (`Plugin` for Android, `CAPPlugin` for iOS) that defines native plugin implementation and exposes methods to JavaScript

Table 3: Official Capacitor Plugins (Core APIs)

Plugin	Example	Description
Camera	`const image = await Camera.getPhoto({` `quality: 90,` `source: CameraSource.Camera` `})`	• Captures photos from device camera or selects from photo library • returns base64 data or file URI with configurable quality and source options

Table 4: Platform Configuration and Project Setup

Configuration	Example	Description
iOS Project Creation	`npx cap add ios` `npx cap open ios`	• Generates Xcode project in `ios/` directory • creates workspace, configures bundle ID, and sets up CocoaPods or Swift Package Manager