Utilizzo dell'estensione Firestore Bundle Builder

L'estensione Firestore Bundle Builder (firestore-bundle-builder) esegue il deployment di una funzione HTTP che pubblica bundle di dati Cloud Firestore. Devi definire i bundle nei documenti Firestore e l'estensione fornisce pacchetti di dati di file binari statici tramite richieste HTTP, insieme a vari meccanismi di memorizzazione nella cache integrati utilizzando Firebase Hosting CDN o Cloud Storage. Se non esiste alcun bundle o se quelli esistenti sono scaduti, questa funzione ne creerà e memorizzerà uno nuovo su richiesta.

Per utilizzare questa estensione, devi prima creare una o più specifiche del pacchetto in Firestore utilizzando la dashboard di amministrazione dell'estensione. La specifica del bundle indica come definire le query denominate (query sulle raccolte e percorsi dei documenti specifici da aggiungere al bundle).

All'interno della specifica del bundle, puoi anche definire parametri da utilizzare nelle query con nome. Puoi impostare i valori di questi parametri utilizzando i parametri di query dell'URL quando chiami la funzione HTTP.

Il link riportato sopra fornisce alcune istruzioni per eseguire le utilità di amministrazione localmente. Dopo aver configurato l'app web, vai a localhost:3000 per creare una specifica utilizzando l'interfaccia utente:

esempio

Creazione e pubblicazione del bundle

Dopo aver installato l'estensione e creato una specifica del bundle, puoi iniziare a creare e pubblicare i bundle chiamando l'endpoint HTTP fornito dall'estensione.

A seconda della specifica del bundle, il bundle richiesto potrebbe essere restituito dalla cache del client, dalla cache di Firebase Hosting o da un file Cloud Storage. Quando tutte le cache sono scadute, una nuova richiesta di pubblicazione attiverà le query di Firestore per compilare il bundle on demand.

Puoi sfruttare le funzionalità della CDN di Firebase Hosting configurando un sito Firebase Hosting che rimandi alla funzione di pubblicazione utilizzando una regola di riscrittura. Le reti CDN replicano il tuo bundle su più server diversi, in modo che gli utenti possano caricare automaticamente il bundle dal server più vicino. Questo è l'approccio preferito.

Per configurare questa opzione in Firebase Hosting, crea o modifica un file firebase.json con i seguenti contenuti ed esegui il deployment del sito:

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

Una volta dispiegato, puoi accedere ai bundle dalla CDN utilizzando l'URL del tuo sito. Ad esempio: https://your-site-url.com/bundles/:bundleId.

In alternativa, puoi configurare l'estensione per memorizzare nella cache i dati in Cloud Storage se non vuoi utilizzare Firebase Hosting. In questo caso, chiameresti direttamente la funzione HTTP di cui è stato eseguito il deployment per generare i bundle.

Integrazione del client

Successivamente, puoi utilizzare un bundle con l'API loadBundle degli SDK Cloud Firestore. Innanzitutto, il bundle deve essere scaricato e poi fornito all'SDK. Ad esempio:

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

Una volta caricato, puoi utilizzare i dati del bundle:

Se hai specificato un array di percorsi dei documenti quando hai definito il bundle, puoi recuperare i dati del documento sul client tramite il bundle:

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

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

Se hai specificato delle query, puoi utilizzare l'API namedQuery per eseguire una query dal bundle:

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

Gli ID query sono definiti come chiave di ogni definizione della proprietà queries (vedi di seguito).