Verwenden der Firestore Bundle Builder-Erweiterung

Die Firestore Bundle Builder-Erweiterung ( firestore-bundle-builder ) stellt eine HTTP-Funktion bereit, die Cloud Firestore-Datenpakete bereitstellt. Sie definieren die Bundles in Firestore-Dokumenten und die Erweiterung stellt statische Binärdatei-Datenpakete über HTTP-Anfragen bereit, zusammen mit verschiedenen integrierten Caching-Mechanismen mithilfe von Firebase Hosting CDN oder Cloud Storage. Wenn kein Bundle vorhanden ist oder vorhandene Bundles abgelaufen sind, erstellt und speichert diese Funktion bei Bedarf ein neues Bundle.

Um diese Erweiterung verwenden zu können, müssen Sie zunächst über das Admin-Dashboard der Erweiterung eine oder mehrere Bundle-Spezifikationen in Firestore erstellen. Mit der Bundle-Spezifikation definieren Sie benannte Abfragen (Sammlungsabfragen und bestimmte Dokumentpfade, die dem Bundle hinzugefügt werden sollen).

Innerhalb der Bundle-Spezifikation können Sie auch Parameter definieren, die in benannten Abfragen verwendet werden sollen. Sie legen Werte für diese Parameter mithilfe von URL-Abfrageparametern fest, wenn Sie die HTTP-Funktion aufrufen.

Der obige Link enthält einige Anweisungen, damit Sie die Admin-Dienstprogramme lokal ausführen können. Sobald Sie die Web-App eingerichtet haben, navigieren Sie zu localhost:3000, um über die Benutzeroberfläche eine Spezifikation zu erstellen:

Beispiel

Aufbau und Bereitstellung des Bundles

Sobald Sie die Erweiterung installiert und eine Bundle-Spezifikation erstellt haben, können Sie mit dem Erstellen und Bereitstellen von Bundles beginnen, indem Sie den von der Erweiterung bereitgestellten HTTP-Endpunkt aufrufen.

Abhängig von der Bundle-Spezifikation kann das angeforderte Bundle aus dem Cache des Clients, dem Firebase Hosting-Cache oder einer Cloud Storage-Datei zurückgegeben werden. Wenn alle Caches abgelaufen sind, löst eine neue Bereitstellungsanforderung Firestore-Abfragen aus, um das Bundle bei Bedarf zu erstellen.

Sie können die Funktionen des Firebase Hosting CDN nutzen, indem Sie eine Firebase Hosting-Site einrichten, die mithilfe einer Rewrite-Regel auf die Serve-Funktion verweist. CDNs replizieren Ihr Bundle auf vielen verschiedenen Servern, sodass Ihre Benutzer das Bundle automatisch vom nächstgelegenen Server laden können. Dies ist der bevorzugte Ansatz.

Um dies in Firebase Hosting einzurichten, erstellen oder bearbeiten Sie eine Datei firebase.json mit den folgenden Inhalten und stellen Sie die Site bereit :

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

Nach der Bereitstellung können Sie über die URL Ihrer Website über das CDN auf Ihre Bundles zugreifen. Zum Beispiel: https://your-site-url.com/bundles/:bundleId .

Alternativ können Sie die Erweiterung so konfigurieren, dass Daten im Cloud-Speicher zwischengespeichert werden, wenn Sie Firebase Hosting nicht verwenden möchten. In diesem Fall würden Sie die bereitgestellte HTTP-Funktion direkt aufrufen, um Bundles zu generieren.

Client-Integration

Als Nächstes können Sie ein Bundle mit der loadBundle API der Cloud Firestore SDKs nutzen. Zuerst muss das Bundle heruntergeladen und dann dem SDK bereitgestellt werden. Zum Beispiel:

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);

Nach dem Laden können Sie die Daten aus dem Bundle verwenden:

Wenn Sie beim Definieren des Bundles ein Array von Dokumentpfaden angegeben haben, können Sie die Dokumentdaten über das Bundle auf Ihrem Client abrufen:

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

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

Wenn Sie Abfragen angegeben haben, können Sie die API namedQuery “ verwenden, um eine Abfrage aus dem Bundle auszuführen:

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

Abfrage-IDs werden als Schlüssel jeder queries definiert (siehe unten).