Capacitor Cheat Sheet

Installation & Setup


         npm install @capacitor/core @capacitor/cli

Install Capacitor dependencies


         npx cap init

Initialize Capacitor in project


         npm install @capacitor/ios @capacitor/android

Add platform packages


         npx cap add ios

Add iOS platform


         npx cap add android

Add Android platform


         npx cap sync

Sync web code and plugins to native projects


         npx cap open ios

Open iOS project in Xcode


         npx cap open android

Open Android project in Android Studio


         npx cap copy

Copy web assets to native projects


         npx cap update

Update Capacitor dependencies and plugins

Configuration


         capacitor.config.ts

Main configuration file


         appId: "com.example.app"

Unique application identifier


         appName: "My App"

Display name of application


         webDir: "dist"

Directory of built web assets


         server.url: "http://192.168.1.100:3000"

Load from dev server (development only)


         server.cleartext: true

Allow HTTP connections (Android)


         plugins: { Camera: { ... } }

Plugin-specific configuration


         ios.scheme: "My App"

iOS-specific URL scheme


         android.buildOptions.keystorePath

Path to Android keystore for signing

Camera Plugin


         npm install @capacitor/camera

Install Camera plugin


         import { Camera } from '@capacitor/camera';

Import Camera plugin


         const image = await Camera.getPhoto({ quality: 90, allowEditing: true, resultType: CameraResultType.Uri })

Take photo from camera


         resultType: CameraResultType.Base64

Get base64 encoded image


         resultType: CameraResultType.DataUrl

Get data URL for image tag


         source: CameraSource.Photos

Pick from photo library


         source: CameraSource.Camera

Use device camera


         width: 500, height: 500

Resize image dimensions


         saveToGallery: true

Save photo to device gallery


         await Camera.requestPermissions()

Request camera permissions

Filesystem Plugin


         npm install @capacitor/filesystem

Install Filesystem plugin


         import { Filesystem, Directory } from '@capacitor/filesystem';

Import Filesystem plugin


         await Filesystem.writeFile({ path: 'file.txt', data: 'content', directory: Directory.Documents })

Write file to filesystem


         const contents = await Filesystem.readFile({ path: 'file.txt', directory: Directory.Documents })

Read file from filesystem


         await Filesystem.deleteFile({ path: 'file.txt', directory: Directory.Documents })

Delete file


         await Filesystem.mkdir({ path: 'mydir', directory: Directory.Documents })

Create directory


         await Filesystem.rmdir({ path: 'mydir', directory: Directory.Documents })

Remove directory


         await Filesystem.readdir({ path: '/', directory: Directory.Documents })

List directory contents


         await Filesystem.stat({ path: 'file.txt', directory: Directory.Documents })

Get file info (size, modified time)


         Directory.Documents, Directory.Data, Directory.Cache

Available directory constants


         encoding: Encoding.UTF8

Specify text encoding

Network Plugin


         npm install @capacitor/network

Install Network plugin


         import { Network } from '@capacitor/network';

Import Network plugin


         const status = await Network.getStatus()

Get current network status


         status.connected

Check if device is connected


         status.connectionType

Get connection type (wifi, cellular, none)


         Network.addListener('networkStatusChange', (status) => {...})

Listen for network changes


         await Network.removeAllListeners()

Remove all network listeners

Geolocation Plugin


         npm install @capacitor/geolocation

Install Geolocation plugin


         import { Geolocation } from '@capacitor/geolocation';

Import Geolocation plugin


         const position = await Geolocation.getCurrentPosition()

Get current GPS position


         position.coords.latitude, position.coords.longitude

Access latitude and longitude


         await Geolocation.watchPosition({}, (position) => {...})

Watch position changes


         await Geolocation.clearWatch({ id: watchId })

Stop watching position


         await Geolocation.requestPermissions()

Request location permissions


         enableHighAccuracy: true

Request high accuracy location


         timeout: 10000, maximumAge: 0

Position timeout and cache settings

Storage Plugin


         npm install @capacitor/preferences

Install Preferences (Storage) plugin


         import { Preferences } from '@capacitor/preferences';

Import Preferences plugin


         await Preferences.set({ key: 'name', value: 'John' })

Store key-value pair


         const { value } = await Preferences.get({ key: 'name' })

Retrieve value by key


         await Preferences.remove({ key: 'name' })

Remove specific key


         await Preferences.clear()

Clear all stored data


         const { keys } = await Preferences.keys()

Get all stored keys


         await Preferences.set({ key: 'user', value: JSON.stringify(obj) })

Store complex objects as JSON

Device & App Info


         npm install @capacitor/device @capacitor/app

Install Device and App plugins


         import { Device } from '@capacitor/device';

Import Device plugin


         const info = await Device.getInfo()

Get device information


         info.platform, info.model, info.osVersion

Access platform and OS details


         const id = await Device.getId()

Get unique device identifier


         import { App } from '@capacitor/app';

Import App plugin


         const info = await App.getInfo()

Get app info (version, build number)


         App.addListener('appStateChange', (state) => {...})

Listen for app state changes


         App.addListener('backButton', () => {...})

Handle Android back button


         await App.exitApp()

Exit application (Android only)

Native Plugins


         npm install @capacitor/haptics

Haptic feedback plugin


         npm install @capacitor/share

Native share sheet plugin


         npm install @capacitor/toast

Native toast notifications


         npm install @capacitor/splash-screen

Splash screen control


         npm install @capacitor/status-bar

Status bar styling


         npm install @capacitor/keyboard

Keyboard control and events


         npm install @capacitor/browser

In-app browser plugin


         npm install @capacitor/clipboard

Clipboard access


         npm install @capacitor/dialog

Native dialogs and alerts


         npm install @capacitor/local-notifications

Local push notifications


         npm install @capacitor/push-notifications

Remote push notifications (FCM/APNS)

iOS Specific Configuration


         Info.plist permissions: NSCameraUsageDescription

Camera permission description


         NSLocationWhenInUseUsageDescription

Location permission description


         NSPhotoLibraryUsageDescription

Photo library permission description


         pod install

Install CocoaPods dependencies (in ios/ folder)


         ios/App/App/capacitor.config.json

iOS-specific config location


         Signing & Capabilities in Xcode

Configure app signing and capabilities

Android Specific Configuration


         AndroidManifest.xml permissions

Declare required permissions


         <uses-permission android:name="android.permission.CAMERA" />

Camera permission in manifest


         <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

Location permission in manifest


         android/app/build.gradle

Android build configuration


         android/variables.gradle

Android SDK and build tool versions


         ./gradlew clean

Clean Android build (in android/ folder)


         android:usesCleartextTraffic="true"

Allow HTTP in development (AndroidManifest.xml)

Development Workflow


         npm run build && npx cap sync

Build web app and sync to native


         npx cap run ios

Build and run on iOS simulator


         npx cap run android

Build and run on Android emulator


         npx cap run ios --target="iPhone 14"

Run on specific iOS simulator


         npx cap run android --target device-id

Run on specific Android device


         ionic cap run ios --livereload --external

Live reload during development (Ionic)


         Chrome DevTools for Android debugging

chrome://inspect for remote debugging


         Safari Web Inspector for iOS debugging

Develop > Simulator > [App]


         npx cap doctor

Check Capacitor environment setup


         npx cap ls

List installed Capacitor plugins