Capacitor / Ionic Alternative — Mobile

Capacitor: Mobile Apps untuk Web Developer Capacitor adalah runtime dari Ionic yang memungkinkan kamu membungkus web app (React, Vue, Angular, vanilla) menjadi

Capacitor: Mobile Apps untuk Web Developer

Capacitor adalah runtime dari Ionic yang memungkinkan kamu membungkus web app (React, Vue, Angular, vanilla) menjadi native mobile app. Beda dari React Native yang render ke native components, Capacitor menjalankan web app di WebView tapi dengan akses ke native API.

Kapan Pilih Capacitor?

Setup Capacitor

# Tambahkan Capacitor ke project web yang sudah ada
npm install @capacitor/core @capacitor/cli
npx cap init "My App" com.myapp.app

# Tambahkan platform
npm install @capacitor/ios @capacitor/android
npx cap add ios
npx cap add android

# Struktur project:
# my-web-app/
# ├── src/           # Web app code (React/Vue/etc)
# ├── dist/          # Build output
# ├── ios/           # Native iOS project (Xcode)
# ├── android/       # Native Android project (Gradle)
# └── capacitor.config.ts

Capacitor Config

// capacitor.config.ts
import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.myapp.app',
  appName: 'My App',
  webDir: 'dist',  // folder output build web
  server: {
    // Development: point ke dev server
    url: 'http://192.168.1.100:5173',
    cleartext: true,
  },
  plugins: {
    SplashScreen: {
      launchAutoHide: false,
    },
    PushNotifications: {
      presentationOptions: ['badge', 'sound', 'alert'],
    },
  },
};

export default config;

Mengakses Native API

import { Camera, CameraResultType } from '@capacitor/camera';
import { Geolocation } from '@capacitor/geolocation';
import { LocalNotifications } from '@capacitor/local-notifications';
import { Share } from '@capacitor/share';

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

// GPS
const position = await Geolocation.getCurrentPosition();
console.log(position.coords.latitude, position.coords.longitude);

// Share
await Share.share({
  title: 'Check this out',
  text: 'Keren banget!',
  url: 'https://myapp.com/post/123',
});

// Local Notifications
await LocalNotifications.schedule({
  notifications: [{
    title: 'Reminder',
    body: 'Jangan lupa belajar hari ini!',
    id: 1,
    schedule: { at: new Date(Date.now() + 3600000) },
  }],
});

Development Workflow

# 1. Develop web app seperti biasa
npm run dev

# 2. Build web app
npm run build

# 3. Sync ke native project
npx cap sync

# 4. Buka di native IDE
npx cap open ios      # Buka di Xcode
npx cap open android  # Buka di Android Studio

# Live Reload (development)
# Set server.url di capacitor.config.ts ke dev server URL
npx cap run ios --livereload --external

Capacitor vs React Native

Yang akan kamu pelajari