firestoreのオフラインデータをキャッシュとして使い、なるべくサーバと通信しない方法をやっていきます。
firestoreの基本的な操作はわかってる人向け。

まずはオフラインデータを有効にしようね

ウェブの場合、オフラインの永続性はデフォルトで無効になっています。永続性を有効にするには、enablePersistence メソッドを呼び出します。

オーケー！

ユーザーが同じ Cloud Firestore データベースを参照する複数のブラウザタブを開き、オフラインの永続性が有効になっている場合、Cloud Firestore は最初のタブでのみ正しく動作します。

それは困る。具体的な状況はわからんが俺の直感が困ると告げている。
でも大丈夫！

Multi-Tab Offline Support in Cloud Firestore!

マルチタブもイけるようにしたよ（意訳）
さすがgoogle！そこにシビがれる！blogじゃなくてdocumentに書いとけよそういうこと！
というわけで。

const db = firebase.firestore();
db.enablePersistence({ experimentalTabSynchronization: true }).then(() => {
  console.log("マルチタブでオフラインデータが使えるよ！");
});

はい！オフラインデータが有効になりました。
これでfirestoreに追加したデータは、同時にlocalのindexedDBにキャッシュされます。

キャッシュからデータを取得しよう

オフラインデータを有効にする | Firebase

端末がオフラインのときにドキュメントを取得すると、Cloud Firestore はキャッシュからデータを返します。そのドキュメントのデータがキャッシュに存在しない場合やドキュメントが存在しない場合、get 呼び出しはエラーを返します。

違うの！オフラインのときだけじゃなくて、いつでも最初はキャッシュからデータがほしいの！
というわけでコレ！

// friendsコレクションからservalのデータを取得するよ！
const serval = await db
  .collection("friends")
  .doc("serval")
  .get({ source: "cache" }); // コレ！

docRefのgetメソッドにはオプションが設定できるよ！
source:"cache"で明示的にキャッシュからデータを取得できちまうんだ！
通信も発生しないんだ！

遊び方は無限大

get()にオプションをつけていだけなので、collectionを丸ごと取得したり、whereも使えます。
キャッシュにデータがないときはerrorを返すので、catchしてget({ source: "server" })すれば良いと思います。
キャッシュ生活始めよう！