Informazioni su Firebase per il web

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

Se hai domande su un argomento non trattato in questa pagina, visita una delle nostre community online. Aggiorneremo periodicamente questa pagina con nuovi argomenti, quindi controlla di tanto in tanto per vedere se abbiamo aggiunto l'argomento che ti interessa.

Versioni SDK: con namespace e modulari

Firebase fornisce due interfacce API per le app web:

  • JavaScript - namespaced. Si tratta dell'interfaccia JavaScript che Firebase ha gestito per molti anni ed è familiare agli sviluppatori web con app Firebase meno recenti. Poiché l'API con namespace non trae vantaggio dal supporto continuo delle nuove funzionalità, la maggior parte delle nuove app dovrebbe invece adottare l'API modulare.
  • JavaScript - modular. Questo SDK si basa su un approccio modulare che fornisce dimensioni ridotte per l'SDK e una maggiore efficienza con gli strumenti di compilazione JavaScript moderni come webpack o Rollup.

L'API modulare si integra bene con gli strumenti di build che rimuovono il codice non utilizzato nell'app, un processo noto come "tree-shaking". Le app create con questo SDK beneficiano di un'impronta di dimensioni notevolmente ridotte. L'API con spazio dei nomi, sebbene disponibile come modulo, non ha una struttura rigorosamente modulare e non offre lo stesso grado di riduzione delle dimensioni.

Sebbene la maggior parte delle API modulari segua gli stessi schemi delle API con namespace, l'organizzazione del codice è diversa. In genere, l'API con namespace è orientata verso un modello di namespace e servizio, mentre l'API modulare è orientata verso funzioni discrete. Ad esempio, la concatenazione di punti dell'API con spazio dei nomi, ad esempio firebaseApp.auth(), viene sostituita nell'API modulare da una singola funzione getAuth() che accetta firebaseApp e restituisce un'istanza Authentication.

Ciò significa che le app web create con l'API con spazi dei nomi richiedono il refactoring per sfruttare la progettazione modulare delle app. Per ulteriori dettagli, consulta la guida all'upgrade.

JavaScript - API modulare per le nuove app

Se stai avviando una nuova integrazione con Firebase, puoi attivare l'API modulare quando aggiungi e inizializzi l'SDK.

Durante lo sviluppo della tua app, tieni presente che il codice sarà organizzato principalmente attorno alle funzioni. Nell'API modulare, i servizi vengono passati come primo argomento e la funzione utilizza poi i dettagli del servizio per fare il resto. Ad esempio:

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

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

Per ulteriori esempi e dettagli, consulta le guide per ciascuna area di prodotto e la documentazione di riferimento dell'API modulare.

Modi per aggiungere gli SDK Web alla tua app

Firebase fornisce librerie JavaScript per la maggior parte dei prodotti Firebase, tra cui Remote Config, FCM e altri. Il modo in cui aggiungi gli SDK Firebase alla tua app web dipende dagli strumenti che utilizzi con la tua app (ad esempio un bundler di moduli).

Puoi aggiungere una delle librerie disponibili alla tua app tramite uno dei metodi supportati:

  • npm (per i bundler di moduli)
  • CDN (rete di distribuzione dei contenuti)

Per istruzioni dettagliate sulla configurazione, consulta Aggiungi Firebase alla tua app JavaScript. Il resto di questa sezione contiene informazioni utili per scegliere tra le opzioni disponibili.

npm

Scaricando il pacchetto Firebase npm (che include sia i bundle browser che Node.js) si ottiene 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 il passaggio di rendering lato server (SSR) dei framework SSR.

L'utilizzo di npm con un bundler di moduli come webpack o Rollup offre opzioni di ottimizzazione per "tree-shake" il codice inutilizzato e applicare polyfill mirati, il che può ridurre notevolmente l'impronta delle dimensioni dell'app. L'implementazione di queste funzionalità può aggiungere un po' di complessità alla configurazione e alla catena di build, ma vari strumenti CLI mainstream possono contribuire a mitigarla. Questi strumenti includono Angular, React, Vue, Next e altri.

In sintesi:

  • Fornisce un'ottimizzazione preziosa delle dimensioni dell'app
  • Sono disponibili strumenti efficaci per gestire i moduli
  • Obbligatorio per il rendering lato server 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 risultare familiare a molti sviluppatori. Se utilizzi la CDN per aggiungere gli SDK, non avrai bisogno di uno strumento di compilazione e la tua catena di compilazione potrebbe risultare più semplice e facile da utilizzare rispetto ai bundler di moduli. Se non ti preoccupa particolarmente la dimensione di installazione della tua app e non hai requisiti speciali come la transpilazione da TypeScript, la CDN potrebbe essere una buona scelta.

In sintesi:

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

Varianti dell'SDK Web di Firebase

L'SDK web di Firebase può essere utilizzato sia nelle applicazioni browser che in quelle Node. Tuttavia, diversi prodotti non sono disponibili negli ambienti Node. Consulta l'elenco degli ambienti supportati.

Alcuni SDK di prodotto forniscono varianti separate per browser e Node, ognuna delle quali è disponibile nei formati ESM e CJS, e alcuni SDK di prodotto forniscono persino varianti Cordova o React Native. L'SDK Web è configurato per fornire la variante corretta in base alla configurazione degli strumenti o all'ambiente e nella maggior parte dei casi non dovrebbe richiedere la selezione manuale. Tutte le varianti dell'SDK sono progettate per aiutare a creare app web o app client per l'accesso degli utenti finali, ad esempio in un'applicazione Node.js desktop o IoT. Se il tuo obiettivo è configurare l'accesso amministrativo da ambienti privilegiati (come i server), utilizza Firebase Admin SDK.

Rilevamento dell'ambiente con bundler e framework

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

Se il tuo codice utilizza istruzioni Node.js require, l'SDK trova il bundle specifico per Node. In caso contrario, le impostazioni del bundler devono essere configurate correttamente per rilevare il campo del punto di ingresso corretto nel file package.json (ad esempio, main, browser o module). Se si verificano errori di runtime con l'SDK, verificare che il bundler sia configurato per dare priorità al tipo di bundle corretto per il proprio ambiente.

Scopri di più sull'oggetto di configurazione Firebase

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

  • Non è consigliabile modificare manualmente l'oggetto di configurazione, in particolare le seguenti "opzioni Firebase" obbligatorie: apiKey, projectId e appID. Se inizializzi la tua app con valori non validi o mancanti per queste "opzioni Firebase" richieste, gli utenti della tua app potrebbero riscontrare problemi gravi. L'eccezione è authDomain, che può essere aggiornato seguendo le best practice per l'utilizzo di signInWithRedirect.

  • Se hai abilitato Google Analytics nel tuo progetto Firebase, il tuo oggetto di configurazione conterrà il campo measurementId. Scopri di più su questo campo nella pagina Guida introduttiva di Analytics.

  • Se abiliti Google Analytics o Realtime Database dopo aver creato la tua Firebase Web App, assicurati che l'oggetto di configurazione Firebase che utilizzi nella tua app sia aggiornato con i valori di configurazione associati (rispettivamente measurementId e databaseURL). Puoi ottenere l'oggetto di configurazione Firebase in qualsiasi momento.

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

var firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  // The value of `databaseURL` depends on the location of the database
  databaseURL: "https://DATABASE_NAME.firebaseio.com",
  projectId: "PROJECT_ID",
  // The value of `storageBucket` depends on when you provisioned your default bucket (learn more)
  storageBucket: "PROJECT_ID.firebasestorage.app",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
  measurementId: "G-MEASUREMENT_ID",
};

Librerie disponibili

Opzioni di configurazione aggiuntive

Caricamento ritardato degli SDK di Firebase (da CDN)

È possibile ritardare l'inclusione degli SDK di Firebase finché non è stata caricata l'intera pagina. Se utilizzi script CDN API modulari con <script type="module">, questo è il comportamento predefinito. Se utilizzi script CDN con spazi dei nomi come modulo, completa questi passaggi per posticipare il caricamento:

  1. Aggiungi un flag defer a ciascun tag script per gli SDK di Firebase, quindi rimanda l'inizializzazione di Firebase utilizzando un secondo script, ad esempio:

    <script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>

<script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script>
<script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-firestore.js"></script>

// ...

<script defer src="./init-firebase.js"></script>

  2. Crea un file init-firebase.js, quindi includi quanto segue nel file:

    // TODO: Replace the following with your app's Firebase configuration
var firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Utilizzare più progetti Firebase in una singola app

Nella maggior parte dei casi, è sufficiente inizializzare Firebase in una singola app predefinita. È possibile accedere a Firebase da tale app in due modi equivalenti:

Web

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();
app_default_init_options.js

Web

// 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();
firebaseapp.js

A volte, però, può essere 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. In alternativa, potresti voler autenticare un progetto mantenendo non autenticato un secondo progetto.

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

Web

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);
app_multi_project_init_options.js

Web

// 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();
firebaseapp.js

Eseguire un server web locale per lo sviluppo

Se stai creando un'app Web, alcune parti dell'SDK Firebase JavaScript richiedono che l'app Web venga distribuita da un server anziché dal file system 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 diversi passaggi riportati di seguito.

Per gestire la tua app web, utilizzerai la CLI Firebase, uno strumento a riga di comando.

  1. Consulta la documentazione di Firebase CLI per scoprire come installare la CLI o eseguire l'aggiornamento all'ultima versione.

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

    firebase init

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

    firebase serve

Risorse open source per gli SDK JavaScript di Firebase

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

SDK JavaScript di Firebase

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

Esempi di avvio rapido

Firebase gestisce una raccolta di esempi di avvio rapido per la maggior parte delle API Firebase sul Web. Trova queste guide rapide nel nostro repository pubblico di guide rapide Firebase su GitHub. È possibile utilizzare queste guide rapide come codice di esempio per l'utilizzo degli SDK di Firebase.