Implementing IndexedDB for Persistent Storage

1. Why Use IndexedDB?

IndexedDB is a low-level API for storing structured data in the browser.

Unlike localStorage, it can handle large amounts of data and supports advanced queries.

Use cases for IndexedDB in a PWA:

2. Setting Up IndexedDB in a PWA

First, we need to open a database and create an object store:

async function openDatabase() {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open("pwa_db", 1);

    request.onupgradeneeded = (event) => {
      const db = event.target.result;
      if (!db.objectStoreNames.contains("requests")) {
        db.createObjectStore("requests", { keyPath: "id" });
      }
    };

    request.onsuccess = (event) => resolve(event.target.result);
    request.onerror = (event) => reject(event.target.error);
  });
}

Now, we can store data whenever an API request is made:

async function saveDataLocally(key, data) {
  const db = await openDatabase();
  const tx = db.transaction("requests", "readwrite");
  const store = tx.objectStore("requests");
  await store.put({ id: key, data });
}

3. Retrieving Data from IndexedDB

When a user is offline, we can fetch the stored data instead of making API calls:

async function getDataFromIndexedDB(key) {
  const db = await openDatabase();
  const tx = db.transaction("requests", "readonly");
  const store = tx.objectStore("requests");
  return await store.get(key);
}