Capacitor is Ionic’s native runtime. It wraps your web app and provides JavaScript APIs for device features.

Core Concepts 

  JavaScript (your app)
       ↓
Capacitor Plugin API
       ↓
Native code (Swift/Kotlin)
       ↓
Device hardware / OS

After adding a plugin, always sync native projects:

  npm install @capacitor/camera
npx cap sync

Camera 

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

async function takePhoto() {
    const photo = await Camera.getPhoto({
        quality: 90,
        allowEditing: false,
        resultType: CameraResultType.Uri,
    });
    const imageUrl = photo.webPath;
    return imageUrl;
}

Geolocation 

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

async function getCurrentPosition() {
    const coords = await Geolocation.getCurrentPosition();
    return {
        lat: coords.coords.latitude,
        lng: coords.coords.longitude,
    };
}

Request permissions before use on real devices.

Preferences (Storage)

Capacitor’s Preferences API replaces localStorage for native apps:

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

// Save
await Preferences.set({ key: 'username', value: 'jane' });

// Read
const { value } = await Preferences.get({ key: 'username' });

// Remove
await Preferences.remove({ key: 'username' });

Platform Detection 

  import { Capacitor } from '@capacitor/core';

if (Capacitor.isNativePlatform()) {
    // Running on iOS or Android
} else {
    // Running in browser
}

const platform = Capacitor.getPlatform(); // 'ios' | 'android' | 'web'

Custom Plugins

The community publishes plugins at capacitorjs.com/docs/plugins. Install, sync, and import like official plugins.

Testing Native Features

Native APIs require a device or emulator — they won’t work fully in ionic serve. Use:

  ionic cap run ios
ionic cap run android

Next: customize appearance with theming and CSS variables.