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 / developersection / interviews / how do you handle offline data sync using indexeddb?
Ask Question

1 Answers

ICSM Computer
ICSM Computer 30 Jun 2025
Report Abuse

Handling offline data sync with IndexedDB involves storing user actions or data locally when the app is offline, and then syncing it with a remote server once the device comes back online.

Strategy for Offline Data Sync

1. Save Data Locally When Offline

Use navigator.onLine or a try/catch around network requests to detect offline status.

if (!navigator.onLine) {
    await saveToIndexedDB('SyncStore', { type: 'CREATE', data: myData });
} else {
    await sendToServer(myData);
}

2. Detect Online Status

Listen for the online event:

window.addEventListener('online', syncOfflineData);

3. Save Data to IndexedDB (Sync Queue)

function saveToIndexedDB(storeName, data) {
    return new Promise((resolve, reject) => {
        const request = indexedDB.open('OfflineDB', 1);
        request.onupgradeneeded = (e) => {
            const db = e.target.result;
            if (!db.objectStoreNames.contains(storeName)) {
                db.createObjectStore(storeName, { autoIncrement: true });
            }
        };

        request.onsuccess = () => {
            const db = request.result;
            const tx = db.transaction(storeName, 'readwrite');
            const store = tx.objectStore(storeName);
            store.add(data);
            tx.oncomplete = () => resolve();
            tx.onerror = () => reject('Error storing data offline');
        };

        request.onerror = () => reject('DB open error');
    });
}

4. Sync Data When Back Online

async function syncOfflineData() {
    const db = await openIndexedDB('OfflineDB', 'SyncStore');
    const tx = db.transaction('SyncStore', 'readwrite');
    const store = tx.objectStore('SyncStore');

    const allData = await new Promise((resolve, reject) => {
        const req = store.getAll();
        req.onsuccess = () => resolve(req.result);
        req.onerror = () => reject(req.error);
    });

    for (const item of allData) {
        try {
            await sendToServer(item.data); // implement this to hit your API
            store.delete(item.id); // cleanup after successful sync
        } catch (err) {
            console.error('Sync failed for item:', item);
        }
    }
}

5. Combine It All

window.addEventListener('load', () => {
    if (navigator.onLine) syncOfflineData();
});
window.addEventListener('online', syncOfflineData);

Optional Enhancements

Feature Description
idb library Use Jake Archibald’s idb wrapper for cleaner syntax.
Service Worker Intercept network requests and manage caching/sync via Background Sync.
Timestamps Track when data was created offline.
Retry logic Re-attempt failed syncs with exponential backoff.

Summary

  • Store failed requests/data in IndexedDB when offline.
  • Use the online event to detect reconnection.
  • Sync the offline queue to your server and remove synced items.
  • Make syncing safe and idempotent on the server side.
MindStick Training
Markdown for AI

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

Open .md