Capacitor Has a Free API — Build Native Mobile Apps with Web Tech

TL;DR

Capacitor by Ionic lets you build native iOS and Android apps using your existing web skills (HTML, CSS, JavaScript). It provides a free, open-source bridge between your web app and native device APIs — camera, GPS, push notifications, filesystem, and 100+ more.

What Is Capacitor?

Capacitor is a cross-platform native runtime that makes it easy to build web-native apps:

• Web-first — your web app runs in a native WebView
• Native access — full access to native SDKs and APIs
• Framework-agnostic — works with React, Vue, Angular, Svelte, or vanilla JS
• 100+ plugins — camera, filesystem, geolocation, push notifications, etc.
• Progressive Web App support built-in

Quick Start

# Add Capacitor to any web project
npm install @capacitor/core @capacitor/cli
npx cap init

# Add platforms
npm install @capacitor/ios @capacitor/android
npx cap add ios
npx cap add android

# Build and sync
npm run build
npx cap sync

# Open in native IDE
npx cap open ios     # Opens Xcode
npx cap open android # Opens Android Studio

Using Native APIs

Camera

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

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

  // photo.webPath contains the image URI
  imageElement.src = photo.webPath!;
};

Geolocation

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

const getLocation = async () => {
  const position = await Geolocation.getCurrentPosition();
  console.log(`Lat: ${position.coords.latitude}`);
  console.log(`Lng: ${position.coords.longitude}`);
};

// Watch position changes
const watchId = await Geolocation.watchPosition({}, (position) => {
  console.log("Position changed:", position);
});

Push Notifications

import { PushNotifications } from "@capacitor/push-notifications";

// Request permission
await PushNotifications.requestPermissions();

// Register for push
await PushNotifications.register();

// Get token
PushNotifications.addListener("registration", (token) => {
  console.log("Push token:", token.value);
  // Send to your backend
});

// Handle received notification
PushNotifications.addListener("pushNotificationReceived", (notification) => {
  console.log("Notification:", notification.title);
});

Local Storage (Preferences)

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

// Save data
await Preferences.set({ key: "user", value: JSON.stringify(userData) });

// Read data
const { value } = await Preferences.get({ key: "user" });
const user = JSON.parse(value!);

// Remove
await Preferences.remove({ key: "user" });

Capacitor vs React Native vs Flutter

Feature	Capacitor	React Native	Flutter
Language	HTML/CSS/JS	React/JSX	Dart
Reuse web code	✅ 100%	~70%	❌
Native performance	Good (WebView)	Great	Great
Learning curve	Low (web devs)	Medium	High
PWA support	✅ Built-in	❌	❌
Plugin ecosystem	100+	1000+	1000+
Hot reload	✅ Live reload	✅	✅

Live Reload for Development

# Enable live reload on device
npx cap run ios --livereload --external
npx cap run android --livereload --external

Custom Native Plugin

// Define the plugin interface
import { registerPlugin } from "@capacitor/core";

export interface MyPluginPlugin {
  echo(options: { value: string }): Promise<{ value: string }>;
}

const MyPlugin = registerPlugin<MyPluginPlugin>("MyPlugin");

// Use it
const result = await MyPlugin.echo({ value: "Hello from web!" });

Resources

• Capacitor Documentation
• Plugin Directory
• GitHub Repository — 12K+ stars
• Ionic Framework — UI components

---

Need data for your mobile app? My Apify scraping tools can extract and deliver structured data from any website via API — perfect for feeding your Capacitor apps. Questions? Email [e-mail]