Mobile & PWA — Developer Notes

This page collects developer-focused notes for working with CJH’s PWA and native mobile apps.

Tech stack & key libraries

• Frontend: Vite + React + TypeScript + Tailwind.
• UI: shadcn-ui components.
• PWA: vite-plugin-pwa is included for PWA support.
• Offline storage: IndexedDB is used to maintain an offline queue for job updates, photos and other operations. :contentReference[oaicite:19]{index=19} :contentReference[oaicite:20]{index=20} :contentReference[oaicite:21]{index=21}

Capacitor & native plugins

• Capacitor is used for native features. Capacitor-related packages are included in package.json and the repo uses @capacitor/* plugins such as @capacitor/camera, @capacitor/geolocation, @capacitor/push-notifications, and @capacitor/filesystem. Confirm plugin versions in package.json before adding platforms. :contentReference[oaicite:22]{index=22}

Live reload during native development

• Capacitor can be configured to use a Lovable or local preview URL for live reload. Typical flow:

1. Run the web dev server (npm run dev or use the Lovable preview URL).
2. Configure Capacitor to point to the dev server.
3. Sync: npx cap sync.
4. Open the native project (npx cap open ios or use Android Studio). The repo README has a short live-reload section and recommended steps for native development. :contentReference[oaicite:23]{index=23}

Offline queue & IndexedDB

• The client stores queued operations in IndexedDB so the app works offline and syncs on reconnect. Queued operations include photo uploads, job updates, payment records and client notes; the system reconciles and syncs automatically when connectivity returns. Testing in offline mode is essential to ensure conflicts and edge cases are handled properly. :contentReference[oaicite:24]{index=24}

Build & CI considerations

• Use npm run build to create the production site bundle. For native builds, run npx cap sync and then build/submit from Xcode/Android Studio. When switching to a custom domain or production, update the Capacitor server URL and rebuild/sync. See README for the domain and deployment instructions. :contentReference[oaicite:25]{index=25}

Troubleshooting — common dev issues

• Plugin mismatch: If Capacitor plugins fail at runtime, confirm matching major versions across @capacitor/core, platform packages and plugin packages.
• Geolocation or Camera failures: Ensure native permissions are declared in Info.plist/AndroidManifest.xml and that runtime permission requests are implemented.
• PWA cache issues: When changing service worker behavior, clear site data or use an incognito window during iterative testing to avoid cached service-worker assets interfering with dev iterations.

Related articles: Mobile App Setup; PWA Install; Offline & Sync.

Updated on: 10/01/2026