Offline-first for PWAs — where to start
Connectivity drops every hour on a construction site. The subway has no signal at all. Here is how to make an app that just keeps working when there is no network.
Offline-first is the approach where an app works without network by default, not as an optional fallback. Critical for mobile PWAs used on factory floors, warehouses, field crews.
What offline-first means in practice
- All critical data is in local storage. Network is for syncing, not for rendering
- User actions are queued the moment they happen. If there is network — they go out; if not — they wait
- UI never shows "no connection" spinners. It shows a "not synced yet" indicator — the action is already saved locally
Stack for PWAs
- Service Worker — caches static assets and API responses. Without it, offline simply does not work
- IndexedDB — main storage for structured data. Not localStorage (5MB limit, synchronous API)
- Cache API — for static and large responses. Works hand-in-hand with the Service Worker
- Background Sync API — deferred queue flushing when network returns
Where to start
- List the critical user flows that must work without network
- Design the data schema for local storage. Keys, indexes, versions
- Write a Service Worker with a base cache-first strategy for static assets
- Build a local action queue with retry
- Add UI indicators for sync status
What people forget
- Sync conflicts — two devices edited the same record offline. Need a strategy: last-write-wins, merge, or manual resolve
- Auth tokens expiring while offline. Need refresh logic that fires when network returns
- Storage quota. Browsers evict data when storage gets tight — `navigator.storage.persist()` helps
- The first load. Initial network is required — otherwise there is nothing to cache yet