Google I/O 2023 での Firebase の最新情報。その他の情報

Firestore Bundle Builder 拡張機能を使用する

Firestore Bundle Builder（firestore-bundle-builder）拡張機能は、Cloud Firestore データバンドルを提供する HTTP 関数をデプロイします。Firestore ドキュメントでバンドルを定義すると、この拡張機能は HTTP リクエストを介して静的バイナリファイルデータバンドルを提供します。また、Firebase Hosting CDN または Cloud Storage を使用した、さまざまな組み込みキャッシュメカニズムも提供します。バンドルが存在しない場合、または既存のバンドルの有効期限が切れている場合、この関数は新しいバンドルをオンデマンドでビルドして、キャッシュに保存します。

この拡張機能を使用するには、まず、拡張機能の管理ダッシュボードを使用して、Firestore で 1 つ以上のバンドル仕様を作成する必要があります。バンドル仕様では、名前付きクエリ（コレクションクエリとバンドルに追加する特定のドキュメントパス）を定義します。

バンドル仕様では、名前付きクエリで使用するパラメータも定義できます。これらのパラメータの値は、HTTP 関数の呼び出し時に URL クエリパラメータを使用して設定します。

上記のリンク先には、管理ユーティリティをローカルで実行するための手順が記載されています。ウェブアプリを設定したら、localhost:3000 に移動し、UI を使用して仕様を作成します。

バンドルのビルドと提供

拡張機能をインストールしてバンドル仕様を作成したら、拡張機能が提供する HTTP エンドポイントを呼び出して、バンドルのビルドと提供を行うことができます。

リクエストされたバンドルは、バンドル仕様に従ってクライアントのキャッシュ、Firebase Hosting のキャッシュ、または Cloud Storage ファイルから返されます。すべてのキャッシュが期限切れになると、新しいサービスリクエストによって Firestore クエリがトリガーされ、バンドルがオンデマンドでビルドされます。

Firebase Hosting CDN の機能を利用するには、rewrite ルールを使用して、サービス関数を参照する Firebase Hosting サイトを設定します。CDN は、さまざまなサーバーにバンドルを複製するため、ユーザーは最も近いサーバーからバンドルを自動的に読み込むことができます。このアプローチを採用することをおすすめします。

Firebase Hosting でこの設定を行うには、次の内容の firebase.json ファイルを作成または編集して、サイトをデプロイします。

{
  "hosting": {
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "/bundles/*",
        "function": "ext-firestore-bundle-builder-serve"
      }
    ]
  }
}

デプロイしたら、サイトの URL を使用して CDN からバンドルにアクセスできます。例: https://your-site-url.com/bundles/:bundleId。

Firebase Hosting を使用しない場合は、Cloud Storage のキャッシュにデータを保存するように拡張機能を構成できます。この場合、デプロイされた HTTP 関数を直接呼び出してバンドルを生成します。

クライアントの統合

次に、Cloud Firestore SDK の loadBundle API を介してバンドルを使用します。まず、バンドルをダウンロードして SDK に提供する必要があります。例:

import { loadBundle } from "firebase/firestore";

// Download the bundle from the Firebase Hosting CDN:
const bundle = await fetch("/bundles/:bundleId");

// If not using a CDN, download the bundle directly:
// const bundle = await fetch('https://<location>-<project-id>.cloudfunctions.net/ext-firestore-bundle-builder-serve/:bundleId');

await loadBundle(bundle);

読み込みが完了すると、バンドルのデータを使用できます。

バンドルを定義するときにドキュメントパスの配列を指定した場合は、バンドルを介してクライアント上でドキュメントデータを取得できます。

import { getFirestore, doc, getDocFromCache } from "firebase/firestore";
// Bundle Document IDs: ['users/92x1NgSWYKUC4AG4s2nHGMR2ikZ2']

const ref = doc(getFirestore(), "users/92x1NgSWYKUC4AG4s2nHGMR2ikZ2");
const snapshot = await getDocFromCache(ref);

クエリを指定した場合は、namedQuery API を使用してバンドルからクエリを実行できます。

import { getFirestore, namedQuery } from "firebase/firestore";
const query = await namedQuery(getFirestore(), "queryId");
const snapshot = await getDocsFromCache(query);

クエリ ID は、各 queries プロパティ定義のキーとして定義されます（以下を参照）。