How would you design a web app that keeps working offline, for example for field workers with poor connectivity?

What the interviewer wants to hear

• Service worker caches the app shell and static assets with suitable strategies
• Store data locally in IndexedDB and read from it first
• Queue writes in an outbox and sync them when the connection returns
• Plan for conflicts: versioning, last-write-wins or server-side merge rules
• Clear UI for offline and sync status, plus safe app updates

Model answer

I would build it as a PWA. A service worker precaches the app shell and versioned static assets, so the app opens without a network. HTML uses network-first with a cache fallback, while images can use stale-while-revalidate. Data lives in IndexedDB, through a small wrapper such as Dexie, and the UI always reads from the local store, so screens look the same online and offline. Every change is written locally and added to an outbox queue with a unique id. When the connection returns, a sync process sends the queue in order; the ids make retries idempotent. Conflicts are the hard part, so I agree rules with the backend: record versions or timestamps, last-write-wins for simple fields, and a review screen for important clashes. The UI shows clear status: offline banner, pending changes count and sync errors. I also handle storage limits, request persistent storage, and make service worker updates safe so users never lose queued work.

More hard Frontend Developer questions

• How would you design and build a shared component library (design system) used by several product teams?
• A page must show a table with 50,000 rows and stay smooth while scrolling and filtering. How would you build it?
• What are the main security risks for a frontend application and how do you protect against them?
• Your company wants to split a large frontend into micro-frontends. What are the trade-offs and how would you approach it?
• What are React Server Components, and how do they change the way you build a React app?
• You join a team with a large JavaScript React codebase. How would you migrate it to TypeScript without stopping feature work?
• How would you build the frontend for a real-time feature like a shared task board where many users edit at the same time?
• Users report that your single-page app becomes slow and crashes after being open for a few hours. How do you investigate and fix it?
• How do you know your frontend is healthy in production? Describe the monitoring you would set up.