Are you ready to create a powerful hybrid web app with seamless offline functionality? If so, Firebase is your go-to solution. With its persistentLocalCache and the affordable Spark plan, you can easily build PWAs (Progressive Web Apps) that work even without an internet connection.

However, there's a catch: While the Spark plan's 50k/20k reads/writes limit might seem sufficient at first, it can quickly become a bottleneck for dynamic apps that require frequent data fetching or aggregation. For instance, if your app relies heavily on real-time updates or complex calculations, you might find yourself exceeding the daily limit.

In this tutorial, we will create a simple function for fetching Expenses data.

To follow this tutorial, you'll need a basic understanding of Firebase, JavaScript, and Firestore, along with a Firebase project and the necessary tools.

First is to enable persistent local caching in firebase.js

export const db = initializeFirestore(app, {
  localCache: persistentLocalCache(),
});

Lets create a simple utility function to store and update lastModified date to localstorage. This will be called everytime we save new data.

  function storeLastModified(lastModified : Timestamp) {
    localStorage.setItem("lastModified", JSON.stringify(lastModified));
  }

This is our expense property, take note to use Timestamp or high precision date for lastModified.

 type ExpenseType = {
    lastModified: Timestamp
    amount: number
    description: string
  }

Next, lets create a function for data merging and conflict resolution , this will be used if cached data and new data is both available.

function mergeData(newData, cacheData) {
    let mergedData = [...newData, ...cacheData];
    const itemMap = new Map();
    mergedData.forEach((newItem) => {
        const existingItem = itemMap.get(newItem.id);
        if (
          !existingItem ||
          (newItem.lastModified &&
            newItem.lastModified.toDate().getTime() > existingItem.lastModified.toDate().getTime())
        ) {
            itemMap.set(newItem.id, newItem);
        }
      });
return  Array.from(itemMap.values());
}

Now we create the main fetch function:

async function fetchExpenses () : Promise<ExpenseType[]> {


    let finalData : ExpenseType[] = [];
    const lastModifiedDate_inLocal = localStorage.getItem("lastModified");


    if (lastModifiedDate_inLocal) {

        //fetch new data by comparing stored lastModified date
        const fetchNewQuery = query(
                "Expenses",
                orderBy("lastModified", "desc"),
                where("lastModified", ">", lastModifiedDate_inLocal)
            );


        const latestSnapshot =  await getDocsFromServer(fetchNewQuery);
        if (latestSnapshot) {
            //store latest record's lastModified to localstorage
            const lastModified =  latestSnapshot.docs[0].data().lastModified
            storeLastModified(lastModified)


            const newData = latestSnapshot.docs.map((doc) => doc.data());
            if (newData.length > 1) {
                //newer data found, merge with cache data
                //fetch cache data
                const fetchCacheQuery = query("Expenses", orderBy("lastModified", "desc"));
                const cacheSnapshot =  await getDocsFromCache(fetchCacheQuery);
                if (cacheSnapshot) {
                    const cacheData =  cacheSnapshot.docs.map((doc) => doc.data());        
                    finalData = mergeData(newData, cacheData);
                }              
            }  else {
                 //no new data, fetch cache data
                const fetchCacheQuery = query("Expenses", orderBy("lastModified", "desc"));
                const cacheSnapshot =  await getDocsFromCache(fetchCacheQuery);
                if (cacheSnapshot) {
                    const lastModified =  latestSnapshot.docs[0].data().lastModified
                    storeLastModified(lastModified)
                    const cacheData =  cacheSnapshot.docs.map((doc) => doc.data());
                    finalData = mergeData(newData, cacheData);
                }              
            }
        }                
    } else {

        //First fetch, no cache data.
        const fetchQuery = query(
            "Expenses",
            orderBy("lastModified", "desc"),
          );


        const latestSnapshot =  await getDocsFromServer(fetchQuery);
        if (latestSnapshot) {
            //store latest record's lastModified to localstorage
            const lastModified =  latestSnapshot.docs[0].data().lastModified
            storeLastModified(lastModified)


            const newData =  latestSnapshot.docs.map((doc) => doc.data());        
            finalData = newData;
        }
    }
  return finalData;
}

Breakdown:

1 We checked if lastModified date is present in local storage

2 If its not present, there is no cache/offline data and we fetched from server

3 If its present, there is cached data, we then fetch from server to check if there are newer data base on lastModified stored in local storage.

4 If there are newer data, we fetched the cached data, then merged it together with newer data.

Finally, everytime we save an expense, we need to store lastModified in localstorage.

async function saveExpenses (expenses : ExpenseType[]) {
    const now = Timestamp.now();
    
    //update last modified in localstorage on every save
     storeLastModified(now);

    await saveExpensesToFirestore(expenses, now);
}