# Capacitor — Build Cross-Platform Apps with Web Technologies

> Capacitor is an open-source runtime by Ionic that lets you build native iOS, Android, and Progressive Web Apps using standard web technologies like HTML, CSS, and JavaScript.

## Install

Save as a script file and run:

# Capacitor — Build Cross-Platform Apps with Web Technologies

## Quick Use
```bash
npm install @capacitor/core @capacitor/cli
npx cap init my-app com.example.app
npx cap add ios && npx cap add android
npx cap sync && npx cap open ios
```

## 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/


---
Source: https://tokrepo.com/en/workflows/4cd900ae-40c3-11f1-9bc6-00163e2b0d79
Author: Script Depot