Vue Academy · Lesson

Offline Support and Background Sync

Caching API responses, IndexedDB for offline data, background sync for deferred actions.

Offline Support and Background Sync is a free Vue Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Offline-First Thinking

True offline support means the app keeps working without a network: reads come from a local store and writes are queued, then synced when connectivity returns.

IndexedDB for Local Storage

IndexedDB is the browser's large, structured, async storage. Its raw API is verbose, so most apps use the small idb wrapper library.

npm install idb

Opening a Database with idb

openDB returns a promise-based database handle. Define object stores in the upgrade callback.

import { openDB } from "idb";

const db = await openDB("app-db", 1, {
  upgrade(db) {
    db.createObjectStore("todos", { keyPath: "id" });
    db.createObjectStore("outbox", { keyPath: "id", autoIncrement: true });
  }
});

Reading and Writing

Use get, getAll, and put to read and store records. These return promises you can await.

await db.put("todos", { id: 1, text: "Buy milk" });
const all = await db.getAll("todos");

Detecting Offline with navigator.onLine

navigator.onLine is a boolean indicating connectivity. Read it to branch between network and local behavior.

if (!navigator.onLine) {
  // work from IndexedDB only
}

Reacting to Connectivity Events

The window fires online and offline events. Bind a reactive ref to them so the UI reflects status live.

import { ref, onMounted, onUnmounted } from "vue";

const online = ref(navigator.onLine);
const on = () => (online.value = true);
const off = () => (online.value = false);
onMounted(() => {
  window.addEventListener("online", on);
  window.addEventListener("offline", off);
});
onUnmounted(() => {
  window.removeEventListener("online", on);
  window.removeEventListener("offline", off);
});

Queuing Mutations Offline

When a write happens while offline, store it in an outbox store instead of sending it. The UI updates optimistically from local state.

async function saveTodo(todo) {
  await db.put("todos", todo);
  if (!navigator.onLine) {
    await db.add("outbox", { type: "saveTodo", payload: todo });
  } else {
    await api.save(todo);
  }
}

Syncing on Reconnect

When the online event fires, drain the outbox: replay each queued mutation against the server, then clear it.

async function flushOutbox() {
  const items = await db.getAll("outbox");
  for (const item of items) {
    await api.send(item);
    await db.delete("outbox", item.id);
  }
}
window.addEventListener("online", flushOutbox);

The Background Sync API

For sync even after the tab closes, the service worker's Background Sync API registers a sync tag the browser fires once connectivity returns.

const reg = await navigator.serviceWorker.ready;
await reg.sync.register("flush-outbox");

Handling sync in the Worker

The service worker listens for the sync event and runs the flush logic in the background.

// service worker
self.addEventListener("sync", (event) => {
  if (event.tag === "flush-outbox") {
    event.waitUntil(flushOutbox());
  }
});

Conflict Considerations

Replaying queued writes can conflict with server changes. Use versions, timestamps, or last-write-wins rules, and surface unresolved conflicts to the user.

Quick Check

How should writes be handled while the app is offline?

Recap

Offline support stores data in IndexedDB (via the idb library), detects connectivity with navigator.onLine and the online/offline events, queues mutations in an outbox while offline, and syncs them on reconnect - optionally with the service worker Background Sync API. Plan for conflicts when replaying queued writes.

Frequently asked questions

Is the “Offline Support and Background Sync” lesson free?

Yes — the full text of “Offline Support and Background Sync” is free to read here on the web, and the Vue Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

What will I learn in “Offline Support and Background Sync”?

Caching API responses, IndexedDB for offline data, background sync for deferred actions. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Offline Support and Background Sync” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Vue Academy