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