Mobile Apps

git clone https://github.com/you/your-app.git
cd your-app

npm install @capacitor/core @capacitor/cli
npx cap init

npm run build

npm install @capacitor/ios
npx cap add ios
npm install @capacitor/android
npx cap add android

npm run build
npx cap sync

npx cap open ios

npx cap open android

npm install @capacitor/camera

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

const takePhoto = async () => {
  const image = await Camera.getPhoto({
    quality: 90,
    resultType: CameraResultType.Uri,
  });
  return image.webPath;
};

npm install @capacitor/push-notifications

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

// Request permission
await PushNotifications.requestPermissions();

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

// Listen for notifications
PushNotifications.addListener('pushNotificationReceived', notification => {
  console.log('Push received:', notification);
});

npm install @capacitor/geolocation

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

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

npm install @capacitor/preferences

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

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

// Load
const { value } = await Preferences.get({ key: 'user' });
const user = JSON.parse(value);

npm install @capacitor/splash-screen

// capacitor.config.ts
const config: CapacitorConfig = {
  plugins: {
    SplashScreen: {
      launchShowDuration: 2000,
      backgroundColor: '#ffffff',
    },
  },
};

npm install @capacitor/status-bar

import { StatusBar, Style } from '@capacitor/status-bar';

// Dark content for light backgrounds
StatusBar.setStyle({ style: Style.Dark });

.app-container {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

"Make this app installable as a PWA with offline support"