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

Firestore Bundle Builder (firestore-bundle-builder) 擴充功能會部署提供 Cloud Firestore 資料組合的 HTTP 函式。您可以在 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 屬性定義的鍵 (請見下文)。