DEV Community

Alexandre Saieg
Alexandre Saieg

Posted on

Moving a Next.js App Router app from Capacitor server.url to an embedded offline-first build (Android + iOS)

I have an app in production on Android and iOS built with Next.js 16 (App Router, Server Components, Server Actions) + Supabase, wrapped with Capacitor 8 loading the remote site through server.url. It also runs as a PWA (Serwist service worker, data cached in IndexedDB).

The requirement: users must open and use the app offline and on weak signal (the "connected but nothing loads" 4G case), like Spotify or Google Maps offline. Usage is mostly reading, with a few writes queued offline.

What I've learned so far: the Capacitor team says server.url is meant for development, not production. That matches our experience: on a cold start with weak signal the WebView sits on a black screen for 30s+ and falls into errorPath, because the app shell doesn't live on the device. Service-worker tweaks (NetworkFirst, CacheFirst, StaleWhileRevalidate, navigation preload) helped in some cases and broke others, and they behave differently on Android WebView and iOS WKWebView (App-Boun
The direction seems clear: embed the front-end in the binary and use Live Updates for OTA. My questions are about the migration:

  1. How did you handle Server Components and Server Actions? Did you convert them to API routes on the hosted Next app called by absolute URL, reads to the Supabase client with RLS, or something els
  2. output: 'export' or another setup? Any problems with dynamic routes like /events/[id]/...? 3. Which Live Updates provider do you use (Capgo, Capawesog to watch for with App Store and Play Store rules?
  3. Does anything change between Android and iOS in this setup: storage limits, eviction, background sync? 5. Can the migration be done gradually (mobile embedded, d Real-world experience, repositories or articles are very welcome. Thanks!

Top comments (0)