Durante lo sviluppo di un'app Web utilizzando Firebase, potresti riscontrare concetti sconosciuti o aree in cui sono necessarie ulteriori informazioni per prendere le decisioni giuste per il tuo progetto. Questa pagina ha lo scopo di rispondere a queste domande o indicarti risorse per saperne di più.
Se hai domande su un argomento non trattato in questa pagina, visita una delle nostre community online . Aggiorneremo periodicamente anche questa pagina con nuovi argomenti, quindi controlla di nuovo per vedere se abbiamo aggiunto l'argomento di cui vuoi conoscere.
SDK versioni 8 e 9
Firebase fornisce due versioni dell'SDK per le app Web:
- Versione 8. Questa è l'interfaccia JavaScript che Firebase ha mantenuto per diversi anni ed è familiare agli sviluppatori Web con le app Firebase esistenti. 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 dimensioni SDK ridotte e maggiore efficienza con i moderni strumenti di compilazione JavaScript come webpack o Rollup .
La versione 9 si integra bene con gli strumenti di compilazione che eliminano il codice che non viene utilizzato nell'app, un processo noto come "scuotimento degli alberi". Le app create con questo SDK beneficiano di footprint di dimensioni notevolmente ridotte. La versione 8, pur essendo 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 generale, la versione 8 è orientata verso uno spazio dei nomi e un modello di servizio, mentre la versione 9 è orientata verso funzioni discrete. Ad esempio, il concatenamento di punti della versione 8, come firebaseApp.auth()
, viene sostituito nella versione 9 da una singola funzione getAuth()
che accetta 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; vedere la guida all'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 |
|
|
CDN (rete di distribuzione dei contenuti) |
|
|
URL di hosting |
|
Per ulteriori informazioni, consulta Modi per aggiungere gli SDK Web alla tua app e le varianti di Firebase Web SDK più avanti in questa pagina.
Versione 9 per nuove app
Se stai iniziando una nuova integrazione con Firebase, puoi attivare l'SDK versione 9 quando aggiungi e inizializzi l'SDK .
Durante lo sviluppo dell'app, tieni presente che il codice sarà organizzato principalmente in base 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, vedere le guide per ciascuna area di prodotto e la documentazione di riferimento della 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 l'app viene eseguita in un ambiente non browser come Node.js.
Puoi aggiungere una qualsiasi delle librerie disponibili alla tua app tramite uno dei metodi supportati:
- npm (per bundler di moduli e Node.js)
- CDN (rete di distribuzione dei contenuti)
Per istruzioni dettagliate sulla configurazione, consulta 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 browser che bundle Node.js) fornisce una copia locale dell'SDK Firebase, che potrebbe essere necessaria per applicazioni non browser come 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.
L'uso di npm con un bundler di moduli come webpack o Rollup offre opzioni di ottimizzazione per "smuovere l'albero" del codice inutilizzato e applicare polyfill mirati, che possono ridurre notevolmente l'ingombro della tua app. L'implementazione di queste funzionalità può aggiungere una certa complessità alla configurazione e alla catena di compilazione, ma vari strumenti CLI tradizionali possono aiutare a mitigarlo. Questi strumenti includono Angular , React , Vue , Next 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 sulla CDN di Firebase è un semplice metodo di configurazione dell'SDK che potrebbe essere familiare a molti sviluppatori. Usando la CDN per aggiungere gli SDK, non avrai bisogno di uno strumento di compilazione e la tua catena di compilazione potrebbe tendere a essere più semplice e facile da utilizzare rispetto ai bundler di moduli. Se non sei particolarmente preoccupato per le dimensioni installate della tua app e non hai requisiti speciali come la transpilazione da TypeScript, CDN potrebbe essere una buona scelta.
In sintesi:
- Familiare e semplice
- Appropriato quando le dimensioni dell'app non sono un grosso problema
- Appropriato quando il tuo sito web non utilizza strumenti di costruzione.
Varianti di Firebase Web SDK
Attualmente, Firebase fornisce due varianti di Web SDK:
- Un bundle 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. Consulta l'elenco degli ambienti supportati .
Entrambe queste varianti dell'SDK sono progettate per aiutare a creare app Web o app client per l'accesso degli utenti finali, ad esempio in un desktop Node.js o in un'applicazione IoT. Se il tuo obiettivo è configurare l'accesso amministrativo da ambienti privilegiati (come i server), utilizza invece Firebase Admin SDK .
Rilevamento dell'ambiente con bundler 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 le istruzioni require
di Node.js, l'SDK trova il bundle specifico del nodo. In caso contrario, le impostazioni del bundler devono essere calcolate 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 la priorità al tipo di bundle corretto per il proprio ambiente.
Ulteriori informazioni sull'oggetto di configurazione di Firebase
Per inizializzare Firebase nella tua app, devi fornire la configurazione del progetto Firebase della tua app. Puoi ottenere il tuo oggetto di configurazione Firebase in qualsiasi momento.
Non è consigliabile modificare manualmente l'oggetto di configurazione, in particolare le seguenti "opzioni Firebase":
apiKey
,projectId
eappID
. Se inizializzi la tua app con valori non validi o mancanti per queste "opzioni Firebase" obbligatorie, gli utenti della tua app potrebbero riscontrare seri problemi.Se hai abilitato Google Analytics nel tuo progetto Firebase, il tuo oggetto di configurazione contiene il campo
measurementId
. Ulteriori informazioni su questo campo nella pagina introduttiva di Analytics .Se abiliti Google Analytics o Realtime Database dopo aver creato l'app Web Firebase, assicurati che l'oggetto di configurazione Firebase che utilizzi nell'app sia aggiornato con i valori di configurazione associati ( rispettivamente
measurementId
edatabaseURL
). Puoi ottenere il tuo oggetto di configurazione Firebase in qualsiasi momento.
Ecco il formato di un oggetto di configurazione con tutti i servizi abilitati (questi valori vengono popolati 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", storageBucket: "PROJECT_ID.appspot.com", 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 Firebase (dalla CDN)
Puoi ritardare l'inclusione degli SDK Firebase fino al caricamento dell'intera pagina. Se stai utilizzando gli script CDN della versione 9 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:
Aggiungi un flag di
defer
a ciascun tag discript
per gli SDK Firebase, quindi rinvia 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>
Crea un file
init-firebase.js
, quindi includi quanto segue nel file:// TODO: Replace the following with your app's Firebase project configuration var firebaseConfig = { // ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig);
Usa 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 version 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();
Web version 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.
Web version 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);
Web version 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();
Eseguire un server Web locale per lo sviluppo
Se stai creando un'app web, alcune parti dell'SDK JavaScript di Firebase richiedono che tu serva la tua app web da un server anziché dal filesystem locale. Puoi utilizzare l'interfaccia a riga di comando di Firebase 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 l'interfaccia a riga di comando di Firebase, uno strumento da riga di comando.
Visita la documentazione dell'interfaccia a riga di comando di Firebase per informazioni su come installare la CLI o eseguire l'aggiornamento alla versione più recente .
Inizializza il tuo progetto Firebase. Esegui il comando seguente dalla radice della directory dell'app locale:
firebase init
Collega la directory dell'app locale a Firebase
Genera un file
firebase.json
(un file richiesto per Firebase Hosting)Ti chiede di specificare una directory radice pubblica che contenga i tuoi file statici pubblici (HTML, CSS, JS, ecc.)
Il nome predefinito per la directory che Firebase cerca è "pubblica". Puoi anche impostare la directory pubblica in un secondo momento modificando direttamente il tuo file
firebase.json
.
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 JavaScript Firebase
Firebase supporta lo sviluppo open source e incoraggia i contributi e i feedback della community.
SDK JavaScript Firebase
La maggior parte degli SDK JavaScript di Firebase sono sviluppati come librerie open source nel nostro repository GitHub pubblico di Firebase .
Esempi di avvio rapido
Firebase conserva una raccolta di esempi di avvio rapido per la maggior parte delle API Firebase sul Web. Trova queste guide di avvio rapido nel nostro repository di avvio rapido GitHub pubblico di Firebase . Puoi utilizzare queste guide di avvio rapido come codice di esempio per l'utilizzo degli SDK Firebase.