Utilizzo dell'estensione Firestore Bundle Builder

L'estensione Firestore Bundle Builder (firestore-bundle-builder) esegue il deployment di una funzione HTTP che gestisce i bundle di dati Cloud Firestore. Definisci i bundle nei documenti Firestore e l'estensione fornisce il bundle di dati del file binario statico tramite richieste HTTP, insieme a vari meccanismi di memorizzazione nella cache integrati utilizzando la CDN di Firebase Hosting o Cloud Storage. Quando non esiste alcun bundle o i bundle esistenti sono scaduti, questa funzione crea e memorizza nella cache un nuovo bundle on demand.

Per utilizzare questa estensione, devi prima creare una o più specifiche del bundle in Firestore utilizzando la dashboard amministratore dell'estensione. La specifica del bundle definisce le query denominate (query di raccolta e percorsi di documenti specifici da aggiungere al bundle).

All'interno della specifica del bundle, puoi anche definire parametri destinati a essere utilizzati nelle query denominate. Imposti i valori di questi parametri utilizzando i parametri di ricerca URL quando chiami la funzione HTTP.

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

Creazione e pubblicazione del bundle

Una volta installata l'estensione e creata 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 attiva le query Firestore per creare il bundle on demand.

Puoi sfruttare le funzionalità della CDN di Firebase Hosting configurando un sito Firebase Hosting che rimanda alla funzione di servizio utilizzando una regola di riscrittura. Le CDN replicano il bundle su molti server diversi, in modo che gli utenti possano caricarlo automaticamente 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 implementati, 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 bundle.

Integrazione client

Successivamente, puoi utilizzare un bundle con l'API loadBundle degli SDK Cloud Firestore. Il bundle deve prima 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 caricati, puoi utilizzare i dati del bundle:

Se hai specificato un array di percorsi dei documenti quando hai definito il bundle, puoi ottenere i dati dei documenti 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 di proprietà queries (vedi sotto).