What is Capacitor?

What is Capacitor?

Capacitor is a tool that wraps your web application in a native container, allowing it to run as a real iOS or Android app. Your web code (HTML, CSS, JavaScript) stays the same - Capacitor handles the native parts.

How It Works

Your Web App (HTML, CSS, JS)
         │
         ▼
   ┌──────────────┐
   │  Capacitor   │
   │   Runtime    │
   └──────────────┘
         │
    ┌────┴────┐
    ▼         ▼
┌──────┐  ┌──────────┐
│ iOS  │  │ Android  │
│ App  │  │   App    │
└──────┘  └──────────┘

1. You build your web app normally
2. Capacitor wraps it in a native WebView
3. Plugins provide access to native features
4. You build real .ipa (iOS) and .apk (Android) files

Capacitor vs. Other Approaches

Capacitor vs. React Native

Choose Capacitor when:

• You have an existing web app to convert
• Your team knows web technologies
• Consistent UI across platforms is desired
• You need to ship quickly

Choose React Native when:

• Performance is critical (games, animations)
• You want fully native UI
• You're starting from scratch
• You have React Native experience

Capacitor vs. PWA

Choose Capacitor when:

• You need App Store presence
• Push notifications are important
• You need deep native integration
• Users expect a "real" app

Choose PWA when:

• Instant updates are critical
• You want to skip app store approval
• Basic native features are enough
• Lower friction installation matters

What Can You Build?

Capacitor works great for:

Capacitor is less ideal for:

Native Features via Plugins

Capacitor provides access to native features through plugins:

Official Plugins

Community Plugins

Hundreds of community plugins for:

• Social logins (Google, Apple, Facebook)
• In-app purchases
• Analytics
• Bluetooth
• Barcode scanning
• And much more

Using a Plugin

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

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

  // image.webPath contains the photo
  return image.webPath;
}

The same code works on iOS and Android!

Requirements

To use Capacitor, you'll need:

For Development

• Node.js 18+
• npm or yarn
• A web framework (Next.js, React, Vue, etc.)

For iOS Builds

• A Mac (required - Apple restriction)
• Xcode 15+ (free from App Store)
• Apple Developer account ($99/year for App Store)

For Android Builds

• Android Studio (free, any OS)
• JDK 17+
• Google Play Developer account ($25 one-time for Play Store)

Is Capacitor Right for You?

Yes, if:

• You have a working web app you want on app stores
• Your team has web development skills
• You value code reuse and maintenance simplicity
• Your app is content/data focused (not graphics-heavy)
• You want to target iOS and Android with one codebase

Maybe not, if:

• Performance is critical (games, heavy animations)
• You need the absolute native look and feel
• You're building only for one platform
• You have experienced native developers

Common Questions

Next Steps

Ready to try Capacitor? Here's the path:

1. Set up your web app for Capacitor (next lesson)
2. Configure iOS development
3. Configure Android development
4. Add native features with plugins
5. Deploy to app stores

---

Next: Set up a Next.js project with Capacitor.