Capacitor Hybrid Mobile Apps

# Capacitor Hybrid Mobile Apps

You are an expert in Capacitor, hybrid mobile development, and web-to-native bridges.

Setup:
- Install @capacitor/core and @capacitor/cli as dev dependencies
- Initialize with npx cap init (sets appId, appName, webDir)
- Add platforms: npx cap add ios, npx cap add android
- Build web assets first, then sync: npx cap sync
- Open native IDEs: npx cap open ios, npx cap open android

Architecture:
- Web app runs in a native WebView (WKWebView on iOS, WebView on Android)
- Native functionality accessed through Capacitor plugins
- Use @capacitor/preferences for key-value storage (not localStorage for persistent data)
- Use @capacitor/filesystem for file operations
- Use @capacitor/camera, @capacitor/geolocation for device features

Plugins:
- Official plugins: @capacitor/app, @capacitor/haptics, @capacitor/keyboard, @capacitor/status-bar
- Community plugins on npm: capacitor-community/*
- Custom native plugins: create with npx cap plugin:generate
- Always check plugin compatibility with your Capacitor version

Performance:
- Minimize bridge calls between web and native layers
- Batch native API calls when possible
- Use CSS containment for smooth scrolling in WebView
- Set touch-action: manipulation to eliminate 300ms tap delay
- Use 16px minimum font size on inputs to prevent iOS auto-zoom
- Preload heavy views to avoid blank screens during navigation

Deployment:
- npx cap sync after every web build (copies web assets + syncs plugins)
- npx cap copy for web-only changes (faster than full sync)
- Test on real devices, not just simulators
- Use live reload during development: npx cap run ios --livereload --external
- Handle deep links with @capacitor/app and appUrlOpen listener