How would you design an offline-first notes or task app as a PWA? Cover storage, sync and conflicts.

Make a local database the source of truth for the UI, queue writes in an outbox, and sync in the background. A PWA (progressive web app) is a website that can be installed and can work offline.

Shell: a service worker precaches the app shell and static assets. A service worker is a script that sits between the page and the network and can serve cached files. So the app opens with no network. A web app manifest makes the app installable.

Data: the UI reads and writes a local database in IndexedDB, never the network directly.

• Every write goes to IndexedDB immediately.
• The write is also added to an outbox: a list of pending operations.
• Each operation has a client-generated id (a UUID) and a timestamp.

So the UI is always instant and works offline.

Sync: when online, a sync engine sends the outbox in order, with idempotency keys. An idempotency key lets the server ignore an operation it already applied. Then the engine pulls changes since the last sync token. Background Sync can help where browsers support it. Support varies, so I also sync on app start, on focus, and on the online event.

Conflicts:

• For simple fields, last-write-wins per field, using server timestamps, is often enough.
• For rich content, keep version numbers and show the user a merge choice.
• If real concurrent editing is common, use CRDTs (data types that merge concurrent edits automatically).

UX: show the sync status and which items are pending. The browser may evict (delete) stored data, so request persistent storage.