Best practice per l'SDK Firebase JavaScript

Questa pagina offre suggerimenti e informazioni per la risoluzione dei problemi relativi a JavaScript che potresti riscontrare quando utilizzi l'SDK Firebase JavaScript.

Hai altre difficoltà o non vedi il tuo problema? Assicurati di consultare le Domande frequenti principali di Firebase per altre domande frequenti specifiche per Firebase o per i prodotti.

Puoi anche consultare il Firebase JavaScript SDK GitHub repo per un elenco aggiornato dei problemi segnalati e delle informazioni per la risoluzione dei problemi, nonché segnalare i tuoi problemi.

Admin SDK per Node.js non sono compatibili con l'SDK Firebase JavaScript

L'Firebase Admin SDK per Node.js e l'Firebase JavaScript SDK sono implementazioni distinte che non condividono definizioni di interfacce, classi o funzioni. Le istanze degli oggetti Admin SDK non sono compatibili con le funzioni dell'SDK Firebase JavaScript.

Ad esempio, un'istanza di Admin SDK di FirebaseApp passata alla funzione Firebase JavaScript SDK getDatabase genera il seguente errore:

TypeError: Cannot read properties of undefined (reading 'getProvider')
 at _getProvider
 at getDatabase

Questo vale per l'intera superficie dell'API dell'SDK Firebase JavaScript, non solo per Realtime Database. Vale anche per l'utilizzo nella direzione opposta. Se tenti di utilizzare il Cloud Firestore tipo Timestamp dell'SDK JS con il Firebase Admin SDK per Node.js si verificano errori simili.

Evita di utilizzare versioni in conflitto dell'Firebase JavaScript SDK

Più versioni in conflitto dell'Firebase JavaScript SDK configurate come dipendenze in un progetto causano errori di runtime quando le istanze dell'SDK vengono passate tra i pacienza dell'SDK pacchetti. Ad esempio, l'utilizzo della libreria Data Connect con una versione non corrispondente di FirebaseApp causa il seguente errore:

Error: Component data-connect has not been registered yet

Questo problema è in genere causato da un aggiornamento delle dipendenze di uno, ma non di tutti, i pacchetti dell'SDK Firebase. Questa situazione si verifica spesso quando uno strumento di aggiornamento automatico delle dipendenze modifica un sottoinsieme delle dipendenze dell'SDK Firebase all'interno del file yarn.lock o package-lock.json del progetto. Poiché molti Firebase JavaScript SDKs interagiscono tra loro, l'utilizzo di varie versioni degli SDKs causa incompatibilità di runtime.

Per risolvere questo problema, elimina la directory node_modules/ e il file yarn.lock (per yarn) o package-lock.json (per npm) nel progetto e reinstalla le dipendenze.

Se gli errori persistono, esegui il debug del problema con il comando npm ls. In questo modo verranno registrate le dipendenze del progetto, in modo da poter identificare le versioni in conflitto del modulo firebase.

Ad esempio, il seguente log mostra package-using-older-firebase che importa una versione in conflitto dell'Firebase JavaScript SDK:

$ npm ls firebase --all
your-app@0.0.0
├── firebase@11.2.0
├─┬ @angular/fire@19.0.0
│ ├── firebase@11.2.0 deduped
│ └─┬ rxfire@6.1.0
│   └── firebase@10.14.1 deduped
└─┬ package-using-older-firebase@0.1.0
  └─── firebase@10.14.1

Potrebbero verificarsi errori anche a causa della combinazione delle istruzioni require e import nella tua app. In questo modo vengono create più istanze dell'Firebase JavaScript SDK, ognuna distinta dall'altra, il che interrompe l'interoperabilità dell'Firebase JavaScript SDK. Aumenta la verbosità del bundler che preferisci per eseguire il debug di questo scenario. Ad esempio, puoi utilizzare il flag di analisi esbuild a questo scopo.

Assicurati che i service worker siano raggruppati

I service worker vengono spesso creati da una pipeline separata dal resto di un'app web e non sono inclusi nella configurazione predefinita dei bundler come Webpack.

Se utilizzi la versione modulare dell'Firebase JavaScript SDK all'interno del service worker, assicurati di configurare il bundler dell'app in modo da includere il file di origine del service worker. L'esempio seguente utilizza npx per raggruppare il service worker firebase-sw.js nella directory src del progetto:

npx esbuild ./src/firebase-sw.js --bundle --minify --main-fields=webworker,browser,module,main,default --outfile=public/firebase-sw.js

L'attivazione di un service worker non raggruppato non riuscirà se utilizza moduli ES di importazione che non supportano i service worker o file che non esistono nell'ambito del service worker. A volte questi errori sono silenziosi e difficili da eseguire il debug.

Per ulteriori informazioni sul raggruppamento della versione modulare dell'Firebase JavaScript SDK nella tua app, consulta Utilizzare i bundler di moduli con Firebase.

In alternativa, puoi eliminare la necessità di raggruppare importando i bundle dell'compat Firebase JavaScript SDK dal CDN:

// Give the service worker access to Firebase Messaging.
// Replace 10.13.2 with the version of the Firebase JS SDK you're using
// in your app.
importScripts('https://www.gstatic.com/firebasejs/10.13.2/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/10.13.2/firebase-messaging-compat.js');

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
firebase.initializeApp({
  ...
});

// Retrieve an instance of Firebase Messaging so that it can handle
// background messages.
const messaging = firebase.messaging();

Utilizza FirebaseServerApp quando lavori con il rendering lato server

L'Firebase JavaScript SDK era originariamente destinato all'esecuzione in ambienti browser. L'introduzione dei framework di rendering lato server (SSR) spinge l'utilizzo dell'SDK in nuovi ambienti di runtime. Questi runtime forniscono un sottoinsieme di strumenti e API forniti dai browser web.

Ad esempio, alcuni SDK Firebase richiedono la memorizzazione nella cache dei dati con IndexedDB, un'API solo per browser. Firebase Authentication potrebbe richiedere l'interazione dell'utente in determinati flussi di accesso, cosa impossibile negli ambienti server headless. App Check si basa sull'euristica del browser per convalidare l'utente prima di creare App Check token.

Quando utilizzi l'SDK in questi nuovi ambienti, utilizza FirebaseServerApp, una nuova variante di FirebaseApp che fornisce i mezzi per precaricare l'istanza SSR di Firebase con i dati raccolti dal lato client.

FirebaseServerApp supporta due parametri:

  • Token ID Auth: se fornito, Firebase Authentication esegue automaticamente l'accesso di un utente autenticato in precedenza, potenzialmente estendendo una sessione attraverso la divisione CSR /SSR.
  • Token App Check: se fornito, il token viene utilizzato dagli altri SDK Firebase senza la necessità di inizializzare un'istanza di un client (che non è supportato al di fuori degli ambienti browser).App Check In questo modo viene sbloccato il supporto SSR per i prodotti con App Check abilitato, come Cloud Functions, Data Connect, Cloud Firestore, Realtime Database, e Vertex AI.

Per un esempio di utilizzo di FirebaseServerApp in Next.js, consulta Semplificare lo sviluppo di app SSR con FirebaseServerApp.