Stop 20 · Advanced TopicsTopics · 5/14

Offline Apps

In short

Metro tunnels, lift rides and weak hostel Wi-Fi are normal for your users. An offline-ready app keeps working through them and catches up when the network returns.

Building apps that remain usable, fully or partially, without a network connection, combining service workers, IndexedDB and thoughtful UI states for offline/online transitions.

The jaadu shopkeeper writes in a notebook while a payment machine shows an offline cloud.

Think of it like this

The shopkeeper's udhaar notebook

When the UPI server is down, the kirana uncle writes your purchase in his notebook. Once it's back, he settles everything. Offline apps do the same: save actions locally, then sync them when the internet returns.

Watch it happen

Saving a note in a metro tunnel

App UI

IndexedDB

Outbox

Server

put note n7

1/6You save a note offline. It goes into IndexedDB first, so the UI updates instantly.

The big ideas

What you need to know

Local first

Save changes to IndexedDB straight away, so the UI updates instantly, online or not.

An outbox for changes

Keep a queue of pending actions and send them to the server when the connection comes back.

Show the status

Tell users when they're offline and which items are still waiting to sync.

Plan for conflicts

If the same item changed in two places, decide a rule: latest edit wins, merge, or ask the user.

See it in code

Walk through the code

1async function saveNote(note) {2  await db.put("notes", note);               // 1. save locally3  await db.put("outbox", { id: note.id, note }); // 2. queue for sync4  if (navigator.onLine) syncOutbox();5}6 7window.addEventListener("online", syncOutbox);8 9async function syncOutbox() {10  for (const item of await db.getAll("outbox")) {11    const res = await fetch("/api/notes", { method: "POST", body: JSON.stringify(item.note) });12    if (res.ok) await db.delete("outbox", item.id);  // 3. clear once sent13  }14}

1/4Save the note locally before any network call.

The note is saved before any network call, so nothing is lost. Items leave the outbox only after the server confirms them.

Save yourself the pain

Common mistakes

Oops

Trusting navigator.onLine to mean the internet works.

Do this instead

It only means a network is connected. A captive Wi-Fi login page still counts as online, so handle failed requests too.

Oops

Showing a spinner forever when a save can't reach the server.

Do this instead

Save locally, mark the item as "waiting to sync" and let the user carry on.

Your mission

Survive a metro tunnel

~40 min

Quick check

A user edits a note offline on their phone and online on their laptop. When the phone reconnects, what should your app have?

Go deeper

1Add an offline indicator that reacts to the browser's `online`/`offline` events.
2Queue user actions made offline and sync them once connectivity returns.
3Design what 'degraded but usable' looks like for your specific app.