Ulteriori informazioni su Web e Firebase

Durante lo sviluppo di un'app Web utilizzando Firebase, potresti incontrare concetti non familiari o aree in cui hai bisogno di più informazioni per prendere le decisioni giuste per il tuo progetto. Questa pagina ha lo scopo di rispondere a queste domande o indicarti le risorse per saperne di più.

Se avete domande su un argomento che non rientrano in questa pagina, visitare uno dei nostri comunità online . Inoltre, aggiorneremo periodicamente questa pagina con nuovi argomenti, quindi controlla di nuovo se abbiamo aggiunto l'argomento che desideri approfondire.

SDK versioni 8 e 9

Firebase fornisce due versioni dell'SDK per le app Web:

  • La versione 8. Questa è l'interfaccia JavaScript che Firebase ha mantenuto per diversi anni ed è familiare a sviluppatori Web con le applicazioni esistenti Firebase. Poiché Firebase rimuoverà il supporto per questa versione dopo un ciclo di rilascio principale, le nuove app dovrebbero invece adottare la versione 9.
  • Versione modulare 9. Questo SDK introduce un approccio modulare che fornisce ridotta dimensione del SDK e una maggiore efficienza con i moderni strumenti di generazione di JavaScript, come webpack o cumulativo .

La versione 9 si integra bene con gli strumenti di compilazione che eliminano il codice che non viene utilizzato nella tua app, un processo noto come "scuotimento degli alberi". Le app create con questo SDK beneficiano di dimensioni notevolmente ridotte. La versione 8, pur disponibile come modulo, non ha una struttura strettamente modulare e non prevede lo stesso grado di riduzione dimensionale.

Sebbene la maggior parte dell'SDK della versione 9 segua gli stessi schemi della versione 8, l'organizzazione del codice è diversa. In genere, la versione 8 è orientata verso uno spazio dei nomi e un modello di servizio, mentre la versione 9 è orientata verso funzioni discrete. Ad esempio, versione 8 del puntino-concatenamento, come firebaseApp.auth() , è sostituito nella versione 9 da un unico getAuth() funzione che riceve firebaseApp e restituisce un'istanza di autenticazione.

Ciò significa che le app Web create con la versione 8 o precedenti richiedono il refactoring per sfruttare l'approccio modulare della versione 9. Firebase fornisce librerie compatibili per facilitare tale transizione; consultare la guida di aggiornamento per ulteriori dettagli.

Cosa è supportato?

Sebbene la versione 8 e la versione 9 abbiano stili di codice diversi, forniscono un supporto molto simile per le funzionalità e le opzioni di Firebase. Come descriveremo in dettaglio in questa guida, entrambe le versioni dell'SDK supportano le varianti JavaScript e Node.js insieme a diverse opzioni per l'aggiunta/installazione degli SDK.

Aggiungi SDK con 8.0 (spazio dei nomi) 9.0 (Modulare)
npm
  • Per JavaScript
  • Per Node.js
  • Per JavaScript
  • Per Node.js
CDN (rete di distribuzione dei contenuti)
  • Per JavaScript
  • Per JavaScript
URL di hosting
  • Per JavaScript
  • Per Node.js

Per ulteriori informazioni, vedere modi per aggiungere gli SDK Web per la vostra applicazione e Firebase Web SDK varianti più avanti in questa pagina.

Versione 9 per nuove app

Se stai iniziando una nuova integrazione con Firebase, si può optare per la versione 9 SDK quando si aggiungono e inizializzare l'SDK .

Come si sviluppa la vostra applicazione, tenere a mente che il codice sarà organizzata principalmente intorno alle funzioni. Nella versione 9, i servizi vengono passati come primo argomento e la funzione utilizza quindi i dettagli del servizio per fare il resto. Per esempio:

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => {
  // Check for user status
});

Per ulteriori esempi e dettagli, consultare le guide per settori di prodotti, nonché la documentazione di riferimento versione 9 .

Modi per aggiungere gli SDK Web alla tua app

Firebase fornisce librerie JavaScript per la maggior parte dei prodotti Firebase, inclusi Remote Config, FCM e altro. Il modo in cui aggiungi gli SDK Firebase alla tua app Web dipende dagli strumenti che stai utilizzando con la tua app (come un bundler di moduli) o se la tua app viene eseguita in un ambiente non browser come Node.js.

È possibile aggiungere una qualsiasi delle librerie disponibili per la vostra applicazione tramite uno dei metodi supportati:

  • npm (per bundle di moduli e Node.js)
  • CDN (rete di distribuzione dei contenuti)

Per le istruzioni di configurazione dettagliate, vedere Aggiungere Firebase alla tua App JavaScript . Il resto di questa sezione contiene informazioni per aiutarti a scegliere tra le opzioni disponibili.

npm

Il download del pacchetto Firebase npm (che include sia il browser che i bundle Node.js) fornisce una copia locale dell'SDK Firebase, che potrebbe essere necessaria per applicazioni non browser come le app Node.js, React Native o Electron. Il download include i bundle Node.js e React Native come opzione per alcuni pacchetti. I bundle Node.js sono necessari per la fase di rendering lato server (SSR) dei framework SSR.

Utilizzando npm con un modulo bundler come webpack o cumulativo fornisce le opzioni di ottimizzazione per "albero-shake" codice non utilizzato e applicare polyfills mirate, che possono ridurre notevolmente l'impronta dimensioni della vostra applicazione. L'implementazione di queste funzionalità può aggiungere complessità alla configurazione e alla catena di compilazione, ma vari strumenti CLI tradizionali possono aiutare a mitigarlo. Questi strumenti comprendono angolare , Reagire , Vue , Avanti , e altri.

In sintesi:

  • Fornisce una preziosa ottimizzazione delle dimensioni dell'app
  • Sono disponibili strumenti robusti per gestire i moduli
  • Richiesto per SSR con Node.js

CDN (rete di distribuzione dei contenuti)

L'aggiunta di librerie archiviate sul CDN di Firebase è un semplice metodo di configurazione dell'SDK che potrebbe essere familiare a molti sviluppatori. Usando il CDN per aggiungere gli SDK, non avrai bisogno di uno strumento di compilazione e la tua catena di compilazione potrebbe tendere ad essere più semplice e facile da lavorare rispetto ai bundle di moduli. Se non sei particolarmente preoccupato per le dimensioni installate della tua app e non hai requisiti speciali come la trascrizione da TypeScript, allora CDN potrebbe essere una buona scelta.

In sintesi:

  • Familiare e semplice
  • Appropriato quando le dimensioni dell'app non sono un problema importante
  • Appropriato quando il tuo sito web non utilizza strumenti di compilazione.

Varianti di Firebase Web SDK

Attualmente, Firebase fornisce due varianti di Web SDK:

  • Un pacchetto JavaScript che supporta tutte le funzionalità di Firebase da utilizzare nel browser.
  • Un bundle Node.js lato client che supporta molte, ma non tutte, le funzionalità di Firebase. Vedere l'elenco dei ambienti supportati .

Entrambe queste varianti dell'SDK sono progettate per aiutare a creare app Web o app client per l'accesso dell'utente finale, ad esempio in un'applicazione desktop o IoT Node.js. Se il vostro obiettivo è quello di impostare l'accesso amministrativo da ambienti privilegiati (come i server) utilizzare il Firebase Admin SDK invece.

Rilevamento dell'ambiente con bundle e framework

Quando installi Firebase Web SDK utilizzando npm, vengono installate entrambe le versioni JavaScript e Node.js. Il pacchetto fornisce un rilevamento dettagliato dell'ambiente per abilitare i bundle giusti per la tua applicazione.

Se il codice utilizza Node.js require dichiarazioni, l'SDK trova il fascio Node-specifica. In caso contrario, le impostazioni del Bundler devono essere capito correttamente per rilevare il campo punto di ingresso a destra nella vostra package.json file (ad esempio, main , browser , o module ). Se riscontri errori di runtime con l'SDK, assicurati che il tuo bundler sia configurato per dare la priorità al tipo corretto di bundle per il tuo ambiente.

Informazioni sull'oggetto di configurazione Firebase

Per inizializzare Firebase nella tua app, devi fornire la configurazione del progetto Firebase della tua app. È possibile ottenere l'oggetto di configurazione Firebase in qualsiasi momento.

  • Si consiglia di non modificare manualmente l'oggetto di configurazione, in particolare le seguenti richieste "Opzioni" Firebase: apiKey , projectId e appID . Se inizializzi la tua app con valori non validi o mancanti per queste "opzioni Firebase" obbligatorie, gli utenti della tua app potrebbero riscontrare problemi seri.

  • Se è stato attivato Google Analytics nel progetto Firebase, l'oggetto di configurazione contiene il campo measurementId . Scopri di più su questo campo nelle Analytics ottenere pagina iniziato .

Ecco il formato di un oggetto di configurazione con tutti i servizi abilitati (questi valori vengono compilati automaticamente):

// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

Librerie disponibili

Opzioni di configurazione aggiuntive

Ritarda il caricamento degli SDK Firebase (da CDN)

Puoi ritardare l'inclusione degli SDK Firebase fino al caricamento dell'intera pagina. Se si utilizza la versione 9 script CDN con <script type="module"> , questo è il comportamento predefinito. Se stai utilizzando gli script CDN della versione 8 come modulo, completa questi passaggi per posticipare il caricamento:

  1. Aggiungi un defer bandiera per ogni script tag per la Firebase SDK, quindi rinviare l'inizializzazione di Firebase utilizzando un secondo script, ad esempio:

    <script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
    
    <script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-firestore.js"></script>
    
    // ...
    
    <script defer src="./init-firebase.js"></script>
    
  2. Crea un init-firebase.js di file, quindi includere la seguente nel file:

    // TODO: Replace the following with your app's Firebase project configuration
    var firebaseConfig = {
      // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    

Utilizza più progetti Firebase in un'unica app

Nella maggior parte dei casi, devi solo inizializzare Firebase in un'unica app predefinita. Puoi accedere a Firebase da quell'app in due modi equivalenti:

Versione web 9

import { initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage";
import { getFirestore } from "firebase/firestore";

// Initialize Firebase with a "default" Firebase project
const defaultProject = initializeApp(firebaseConfig);

console.log(defaultProject.name);  // "[DEFAULT]"

// Option 1: Access Firebase services via the defaultProject variable
let defaultStorage = getStorage(defaultProject);
let defaultFirestore = getFirestore(defaultProject);

// Option 2: Access Firebase services using shorthand notation
defaultStorage = getStorage();
defaultFirestore = getFirestore();

Versione web 8

// Initialize Firebase with a "default" Firebase project
const defaultProject = firebase.initializeApp(firebaseConfig);

console.log(defaultProject.name);  // "[DEFAULT]"

// Option 1: Access Firebase services via the defaultProject variable
let defaultStorage = defaultProject.storage();
let defaultFirestore = defaultProject.firestore();

// Option 2: Access Firebase services using shorthand notation
defaultStorage = firebase.storage();
defaultFirestore = firebase.firestore();

A volte, tuttavia, è necessario accedere a più progetti Firebase contemporaneamente. Ad esempio, potresti voler leggere i dati dal database di un progetto Firebase ma archiviare i file in un progetto Firebase diverso. Oppure potresti voler autenticare un progetto mantenendo un secondo progetto non autenticato.

L'SDK JavaScript Firebase ti consente di inizializzare e utilizzare più progetti Firebase in un'unica app contemporaneamente, con ogni progetto che utilizza le proprie informazioni di configurazione Firebase.

Versione web 9

import { initializeApp, getApp } from "firebase/app";
import { getStorage } from "firebase/storage";
import { getFirestore } from "firebase/firestore";

// Initialize Firebase with a default Firebase project
initializeApp(firebaseConfig);

// Initialize Firebase with a second Firebase project
const otherProject = initializeApp(otherProjectFirebaseConfig, "other");

console.log(getApp().name);  // "[DEFAULT]"
console.log(otherProject.name);    // "otherProject"

// Use the shorthand notation to access the default project's Firebase services
const defaultStorage = getStorage();
const defaultFirestore = getFirestore();

// Use the otherProject variable to access the second project's Firebase services
const otherStorage = getStorage(otherProject);
const otherFirestore = getFirestore(otherProject);

Versione web 8

// Initialize Firebase with a default Firebase project
firebase.initializeApp(firebaseConfig);

// Initialize Firebase with a second Firebase project
const otherProject = firebase.initializeApp(otherProjectFirebaseConfig, "other");

console.log(firebase.app().name);  // "[DEFAULT]"
console.log(otherProject.name);    // "otherProject"

// Use the shorthand notation to access the default project's Firebase services
const defaultStorage = firebase.storage();
const defaultFirestore = firebase.firestore();

// Use the otherProject variable to access the second project's Firebase services
const otherStorage = otherProject.storage();
const otherFirestore = otherProject.firestore();

Esegui un server web locale per lo sviluppo

Se stai creando un'app Web, alcune parti dell'SDK JavaScript Firebase richiedono che tu serva la tua app Web da un server anziché dal filesystem locale. È possibile utilizzare la Firebase CLI per eseguire un server locale.

Se hai già configurato Firebase Hosting per la tua app, potresti aver già completato molti dei passaggi seguenti.

Per servire la tua app web, utilizzerai Firebase CLI, uno strumento da riga di comando.

  1. Visita la documentazione Firebase CLI per imparare a installare la CLI o aggiornamento alla versione più recente .

  2. Inizializza il tuo progetto Firebase. Esegui il seguente comando dalla radice della directory dell'app locale:

    firebase init

  3. Avviare il server locale per lo sviluppo. Esegui il seguente comando dalla radice della directory dell'app locale:

    firebase serve

Risorse open source per gli SDK JavaScript di Firebase

Firebase supporta lo sviluppo open source e incoraggiamo i contributi e i feedback della community.

SDK JavaScript Firebase

La maggior parte dei Firebase SDK JavaScript sono sviluppati come librerie open source nel nostro pubblico repository GitHub Firebase .

Esempi di avvio rapido

Firebase mantiene una raccolta di esempi di avvio rapido per la maggior parte delle API Firebase sul Web. Trovate questi Quickstarts nel nostro pubblico repository QuickStart Firebase GitHub . Puoi utilizzare queste istruzioni di avvio rapido come codice di esempio per l'utilizzo degli SDK Firebase.