Using IndexedDB for Offline-First Web Applications

Using IndexedDB for Offline-First Web Applications In a world of flaky networks and mobile-first users, making web apps work offline is becoming essential. While localStorage offers basic persistence, it quickly falls short for structured or large data. IndexedDB is the browser’s built-in, asynchronous, NoSQL database—perfect for offline-first applications. Here's how to make the most of it. Why IndexedDB? Stores structured data (objects, arrays, blobs, etc.). Works asynchronously, keeping the UI responsive. Supports transactions and indexing. Available in all modern browsers. Step 1: Open a Database const request = indexedDB.open('OfflineAppDB', 1); request.onupgradeneeded = function(event) { const db = event.target.result; db.createObjectStore('notes', { keyPath: 'id' }); }; request.onerror = function(event) { console.error('IndexedDB error:', event.target.errorCode); }; request.onsuccess = function(event) { const db = event.target.result; console.log('Database opened successfully'); }; Step 2: Add Data to IndexedDB function addNote(note) { const request = indexedDB.open('OfflineAppDB'); request.onsuccess = function(event) { const db = event.target.result; const tx = db.transaction('notes', 'readwrite'); const store = tx.objectStore('notes'); store.put(note); tx.oncomplete = () => console.log('Note saved offline'); }; } Step 3: Read Data From IndexedDB function loadNotes(callback) { const request = indexedDB.open('OfflineAppDB'); request.onsuccess = function(event) { const db = event.target.result; const tx = db.transaction('notes', 'readonly'); const store = tx.objectStore('notes'); const notes = []; store.openCursor().onsuccess = function(event) { const cursor = event.target.result; if (cursor) { notes.push(cursor.value); cursor.continue(); } else { callback(notes); } }; }; } Advanced Tip: Sync When Back Online window.addEventListener('online', () => { console.log('Back online, syncing...'); loadNotes(notes => { notes.forEach(note => { // send to server // on success: delete from IndexedDB }); }); }); Conclusion IndexedDB is your best friend when building progressive web apps that function offline. It's robust, scalable, and fully supported in modern browsers. Combine it with service workers and background sync for a seamless offline-first experience. If this post helped you, consider supporting me: buymeacoffee.com/hexshift

Apr 14, 2025 - 13:49

Using IndexedDB for Offline-First Web Applications

In a world of flaky networks and mobile-first users, making web apps work offline is becoming essential. While localStorage offers basic persistence, it quickly falls short for structured or large data. IndexedDB is the browser’s built-in, asynchronous, NoSQL database—perfect for offline-first applications. Here's how to make the most of it.

Why IndexedDB?

Stores structured data (objects, arrays, blobs, etc.).
Works asynchronously, keeping the UI responsive.
Supports transactions and indexing.
Available in all modern browsers.

Step 1: Open a Database

const request = indexedDB.open('OfflineAppDB', 1);

request.onupgradeneeded = function(event) {
  const db = event.target.result;
  db.createObjectStore('notes', { keyPath: 'id' });
};

request.onerror = function(event) {
  console.error('IndexedDB error:', event.target.errorCode);
};

request.onsuccess = function(event) {
  const db = event.target.result;
  console.log('Database opened successfully');
};

Step 2: Add Data to IndexedDB

function addNote(note) {
  const request = indexedDB.open('OfflineAppDB');
  request.onsuccess = function(event) {
    const db = event.target.result;
    const tx = db.transaction('notes', 'readwrite');
    const store = tx.objectStore('notes');
    store.put(note);
    tx.oncomplete = () => console.log('Note saved offline');
  };
}

Step 3: Read Data From IndexedDB

function loadNotes(callback) {
  const request = indexedDB.open('OfflineAppDB');
  request.onsuccess = function(event) {
    const db = event.target.result;
    const tx = db.transaction('notes', 'readonly');
    const store = tx.objectStore('notes');
    const notes = [];

    store.openCursor().onsuccess = function(event) {
      const cursor = event.target.result;
      if (cursor) {
        notes.push(cursor.value);
        cursor.continue();
      } else {
        callback(notes);
      }
    };
  };
}

Advanced Tip: Sync When Back Online

window.addEventListener('online', () => {
  console.log('Back online, syncing...');
  loadNotes(notes => {
    notes.forEach(note => {
      // send to server
      // on success: delete from IndexedDB
    });
  });
});

Conclusion

IndexedDB is your best friend when building progressive web apps that function offline. It's robust, scalable, and fully supported in modern browsers. Combine it with service workers and background sync for a seamless offline-first experience.

If this post helped you, consider supporting me: buymeacoffee.com/hexshift