Informazioni su Firebase per il web

Durante lo sviluppo di un'app web utilizzando Firebase, potresti incontrare concetti non familiari o aree in cui hai bisogno di maggiori informazioni per prendere le decisioni giuste per il tuo progetto. Lo scopo di questa pagina è rispondere a queste domande o 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 inoltre questa pagina periodicamente con nuovi argomenti, quindi ricontrolla se abbiamo aggiunto l'argomento che ti interessa.

Versioni dell'SDK: con nome e modulari

Firebase fornisce due interfacce API per le app web:

  • JavaScript - con spazio dei nomi. Si tratta dell'interfaccia JavaScript gestita da Firebase per molti anni ed è familiare agli sviluppatori web con app Firebase precedenti. Poiché l'API con nome non beneficia del supporto continuo delle nuove funzionalità, la maggior parte delle nuove app dovrebbe adottare l'API modulare.
  • JavaScript - modulare. Questo SDK si basa su un approccio modulare che consente di ridurre le dimensioni dell'SDK e di aumentare l'efficienza con gli strumenti di compilazione JavaScript moderni come webpack o Rollup.

L'API modulare si integra bene con gli strumenti di compilazione 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 ridotta. L'API con nome nello spazio dei nomi, sebbene disponibile come modulo, non ha una struttura strettamente modulare e non offre lo stesso grado di riduzione delle dimensioni.

Sebbene la maggior parte dell'API modulare segua gli stessi pattern dell'API con nome spazio dei nomi, l'organizzazione del codice è diversa. In genere, l'API con spazio dei nomi è orientata a uno schema di spazio dei nomi e servizi, mentre l'API modulare è orientata a funzioni distinte. Ad esempio, la catena di punti dell'API con nome, come firebaseApp.auth(), viene sostituita nell'API modulare da una singola funzione getAuth() che prende firebaseApp e restituisce un'istanza Authentication.

Ciò significa che le app web create con l'API con nome di spazio richiedono il refactoring per sfruttare il design modulare delle app. Per ulteriori dettagli, consulta la guida all'upgrade.

JavaScript: API modulare per le nuove app

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

Durante lo sviluppo dell'app, tieni presente che il codice sarà organizzato principalmente in base alle funzioni. Nell'API modulare, i servizi vengono passati come primo argomento e la funzione utilizza 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 altri esempi e dettagli, consulta le guide per ogni area di prodotto, nonché la documentazione di riferimento dell'API modulare.

Metodi per aggiungere gli SDK web alla tua app

Firebase fornisce librerie JavaScript per la maggior parte dei suoi prodotti, 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 l'app (ad esempio un modulo bundler).

Puoi aggiungere qualsiasi libreria disponibile alla tua app tramite uno dei metodi supportati:

  • npm (per i bundler di moduli)
  • CDN (Content Delivery Network)

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

npm

Se scarichi il pacchetto npm di Firebase (che include i bundle per browser e Node.js), ottieni una copia locale dell'SDK Firebase, che potrebbe essere necessaria per le 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 del rendering lato server (SSR) dei framework SSR.

L'utilizzo di npm con un bundler di moduli come webpack o Rollup fornisce opzioni di ottimizzazione per "tree-shake" il codice inutilizzato e applicare polyfill mirati, che possono ridurre notevolmente l'impronta delle dimensioni della tua app. L'implementazione di queste funzionalità potrebbe aggiungere un po' di complessità alla configurazione e alla catena di compilazione, ma vari strumenti CLI tradizionali possono contribuire ad attenuare il problema. Questi strumenti includono Angular, React, Vue, Next e altri.

In sintesi:

  • Offre un'ottimizzazione delle dimensioni dell'app di grande valore
  • Sono disponibili strumenti efficaci per gestire i moduli
  • Obbligatorio per l'SSR con Node.js

CDN (Content Delivery Network)

L'aggiunta di librerie archiviate nella CDN di Firebase è un semplice metodo di configurazione dell'SDK che potrebbe essere familiare a molti sviluppatori. Se utilizzi la CDN per aggiungere gli SDK, non avrai bisogno di uno strumento di compilazione e la catena di compilazione potrebbe essere più semplice e facile da utilizzare rispetto ai bundler di moduli. Se non ti preoccupi particolarmente delle dimensioni installate 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
  • Appropriata quando le dimensioni dell'app non sono un problema importante
  • Opzione appropriata se 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, ciascuna delle quali è disponibile sia in formato ESM che CJS, mentre altri SDK di prodotto forniscono persino varianti Cordova o React Native. L'SDK web è configurato per fornire la variante corretta in base alla configurazione o all'ambiente degli strumenti e nella maggior parte dei casi non dovrebbe richiedere la selezione manuale. Tutte le varianti dell'SDK sono progettate per contribuire a creare app web o client per l'accesso degli utenti finali, ad esempio in un'applicazione IoT o desktop Node.js. Se il tuo scopo è configurare l'accesso amministrativo da ambienti con privilegi (ad esempio i server), utilizza Firebase Admin SDK.

Rilevamento dell'ambiente con bundler e framework

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

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

Scopri di più sull'oggetto di configurazione Firebase

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

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

  • Se hai attivato Google Analytics nel tuo progetto Firebase, l'oggetto config contiene il campo measurementId. Scopri di più su questo campo nella Analytics pagina introduttiva.

  • Se attivi Google Analytics o Realtime Database dopo aver creato la tua app web Firebase, 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 completati 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

Ritarda il caricamento degli SDK Firebase (dalla CDN)

Puoi ritardare l'inclusione degli SDK Firebase fino al caricamento dell'intera pagina. Se utilizzi script CDN API modulari con <script type="module">, si tratta del 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 ogni tag script per gli SDK Firebase, quindi posticipa 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 e includi quanto segue:

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

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Utilizzare 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:

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ò, devi accedere a più progetti Firebase contemporaneamente. Ad esempio, potresti voler leggere i dati dal database di un progetto Firebase, ma memorizzare i file in un altro progetto Firebase. In alternativa, potresti scegliere di autenticare un progetto mantenendone un altro non autenticato.

L'SDK Firebase JavaScript ti consente di inizializzare e utilizzare contemporaneamente più progetti Firebase in un'unica app, con ciascun 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

Esegui un server web locale per lo sviluppo

Se stai creando un'app web, alcune parti dell'SDK Firebase JavaScript richiedono di pubblicare l'app web da un server anziché dal file system locale. Puoi utilizzare l'interfaccia a riga di comando Firebase per eseguire un server locale.

Se hai già configurato Firebase Hosting per la tua app, potresti aver già completato diversi dei passaggi riportati di seguito.

Per pubblicare l'app web, utilizzerai l'interfaccia a riga di comando Firebase.

  1. Consulta la documentazione dell'interfaccia a riga di comando Firebase per scoprire come installarla o eseguire l'upgrade alla versione più recente.

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

    firebase init

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

    firebase serve

Risorse open source per gli SDK Firebase JavaScript

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

SDK Firebase JavaScript

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

Esempi di guida rapida

Firebase gestisce una raccolta di esempi di guide rapide per la maggior parte delle API Firebase sul web. Puoi trovare queste guide rapide nel nostro repository GitHub delle guide rapide di Firebase. Puoi utilizzare queste rapide come codice di esempio per l'utilizzo degli SDK Firebase.