使用 Firestore 套裝組合建構工具擴充功能

Firestore 套件建構工具 (firestore-bundle-builder) 外掛程式會部署 HTTP 函式，用於提供 Cloud Firestore 資料套件。您可以在 Firestore 文件中定義套件，而擴充功能會透過 HTTP 要求提供靜態二進位檔案資料套件，以及使用 Firebase 代管 CDN 或 Cloud Storage 的各種內建快取機制。如果沒有套件或現有套件已過期，這個函式會視需要建構及快取新的套件。

如要使用這個擴充功能，您必須先透過擴充功能的管理員資訊主頁，在 Firestore 中建立一或多個套裝組合規格。套件規格是指如何定義命名查詢 (集合查詢和要新增至套件的特定文件路徑)。

您也可以在套件規格中定義要用於命名查詢的參數。您可以在呼叫 HTTP 函式時，使用網址查詢參數設定這些參數的值。

上述連結提供一些操作說明，方便您在本機執行管理員公用程式。設定完網頁應用程式後，請前往 localhost:3000，使用 UI 建立規格：

範例

建構及提供套件

安裝擴充功能並建立套件規格後，您就可以呼叫擴充功能提供的 HTTP 端點，開始建構及放送套件。

視套件規格而定，系統可能會從用戶端快取、Firebase 代管快取或 Cloud Storage 檔案中傳回要求的套件。當所有快取都已過期時，新的服務要求會觸發 Firestore 查詢，以便視需要建構套件。

您可以使用重寫規則，設定指向服務函式的 Firebase 代管網站，充分運用 Firebase 代管 CDN 的功能。CDN 會在許多不同的伺服器上複製套件，讓使用者自動從最近的伺服器載入套件。這是建議做法。

如要在 Firebase 託管中設定這項功能，請建立或編輯包含下列內容的 firebase.json 檔案，然後部署網站：

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

部署完成後，您就可以使用網站網址從 CDN 存取套件。例如 https://your-site-url.com/bundles/:bundleId。

如果您不想使用 Firebase 代管，也可以將擴充功能設為在 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 屬性定義的鍵 (請參閱下方說明)。