Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion AI Tools Integration
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

interview

Home Interviews How would you implement offline-first data sync with IndexedDB and a remote API? – MindStick
Ask Question

1 Answers

ICSM Computer
ICSM Computer 09 Jul 2025
Report Abuse

To implement offline-first data sync with IndexedDB and a remote API, follow a clear pattern: queue, store, detect, and sync. Here's a robust and scalable approach, step-by-step:

1. Architecture Overview

[UI] → writes/reads
 ↓             ↑
[IndexedDB] ←→ [Sync Queue]
       ↑           ↓
    [Sync Engine] (online)
          ↓
      [Remote API]

2. Core Components

Component Responsibility
IndexedDB Stores app data + write queue locally
Sync Queue Temporarily holds offline changes
Remote API Source of truth (backend)
Sync Engine Detects connectivity and syncs when online

3. Implementation Steps

Step 1: Set Up Dexie.js (or plain IndexedDB)

const db = new Dexie('AppDB');
db.version(1).stores({
  items: '++id, name, updatedAt',
  syncQueue: '++id, operation, table, payload, timestamp'
});
  • items: Your main data table
  • syncQueue: Holds add, update, delete ops while offline

Step 2: Queue Writes While Offline

Instead of calling the API directly, queue the change locally:

async function addItemOffline(item) {
  await db.items.add(item);

  await db.syncQueue.add({
    operation: 'add',
    table: 'items',
    payload: item,
    timestamp: Date.now()
  });
}

Step 3: Detect Online/Offline Status

window.addEventListener('online', syncWithServer);

Or manually:

if (navigator.onLine) {
  syncWithServer();
}

Step 4: Sync Engine

async function syncWithServer() {
  const queue = await db.syncQueue.orderBy('timestamp').toArray();

  for (const q of queue) {
    try {
      // Post to remote API
      await fetch(`/api/${q.table}/${q.operation}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(q.payload)
      });

      // Remove from queue if successful
      await db.syncQueue.delete(q.id);
    } catch (err) {
      console.error("Sync failed:", err);
      break; // Stop on first failure
    }
  }
}

Step 5: Pull Updates from Server (Optional)

To keep IndexedDB fresh:

async function pullLatest() {
  const res = await fetch('/api/items');
  const items = await res.json();
  await db.items.clear();
  await db.items.bulkPut(items);
}

Run this on:

  • First app load
  • Periodic intervals
  • After successful sync

Advanced Enhancements

Feature How
Conflict resolution Use timestamps or versioning (e.g., updatedAt)
Sync retries Retry failed syncs with exponential backoff
Background sync (PWA) Use Service Workers + Background Sync API
Delta sync Send only changes, not full lists
Status UI Show "Queued changes" or "Offline mode" indicators

Data Flow Summary

User adds data → stored in IndexedDB + syncQueue
Goes online → `syncQueue` processed and pushed to API
Server updates pulled back → `items` table updated

Tools You Can Use

Tool Purpose
Dexie.js Simplified IndexedDB
localForage Unified local storage (IndexedDB fallback)
RxDB / PouchDB Pre-built sync with CouchDB-like APIs
Workbox Background sync + caching for PWAs
advertising
Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.

Open .md