Ulteriori informazioni su Web e Firebase

Mentre sviluppi 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. 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 questa pagina con nuovi argomenti, quindi ricontrolla per vedere se abbiamo aggiunto l'argomento che desideri conoscere.

Versioni SDK: con spazio dei nomi e modulare

Firebase fornisce due superfici API per le app Web:

  • JavaScript: spazio dei nomi. Questa è l'interfaccia JavaScript mantenuta da Firebase per molti anni ed è familiare agli sviluppatori Web con le app Firebase precedenti. Poiché l'API con spazio dei nomi non beneficia del supporto continuo di nuove funzionalità, la maggior parte delle nuove app dovrebbe invece adottare l'API modulare.
  • JavaScript - modulare . Questo SDK si basa su un approccio modulare che fornisce dimensioni ridotte dell'SDK e maggiore efficienza con i moderni strumenti di creazione JavaScript come webpack o Rollup .

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

Sebbene la maggior parte delle API modulari segua gli stessi modelli dell'API con spazi dei nomi, l'organizzazione del codice è diversa. In generale, l'API con spazio dei nomi è orientata verso uno spazio dei nomi e un modello di servizio, mentre l'API modulare è orientata verso funzioni discrete. Ad esempio, il concatenamento di punti dell'API con spazio dei nomi, come firebaseApp.auth() , viene sostituito nell'API modulare da una singola funzione getAuth() che accetta firebaseApp e restituisce un'istanza di autenticazione.

Ciò significa che le app Web create con l'API con spazio dei nomi richiedono il refactoring per sfruttare la progettazione modulare delle app. Consulta la guida all'aggiornamento per ulteriori dettagli.

JavaScript: API modulare per nuove app

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

Mentre sviluppi la tua app, tieni presente che il tuo codice sarà organizzato principalmente attorno alle funzioni . Nell'API modulare, 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, consulta le guide per ciascuna area di prodotto nonché 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, inclusi Remote Config, FCM e altri. 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).

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

  • npm (per bundle di moduli)
  • CDN (rete per la distribuzione dei contenuti)

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

npm

Il download del pacchetto Firebase npm (che include sia i bundle browser che Node.js) ti 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'utilizzo di npm con un module bundler come webpack o Rollup fornisce opzioni di ottimizzazione per "scuotere l'albero" del codice inutilizzato e applicare polyfill mirati, che possono ridurre notevolmente le dimensioni della tua app. L'implementazione di queste funzionalità può aggiungere una certa complessità alla configurazione e alla catena di creazione, ma vari strumenti CLI tradizionali possono aiutare a mitigare questo problema. 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 per la 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. Utilizzando la CDN per aggiungere gli SDK, non avrai bisogno di uno strumento di creazione e la catena di creazione potrebbe tendere a essere più semplice e facile da utilizzare rispetto ai bundle di moduli. Se non sei particolarmente preoccupato per le 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
  • Appropriato quando le dimensioni dell'app non sono una preoccupazione importante
  • Appropriato quando il tuo sito web non utilizza strumenti di creazione.

Varianti dell'SDK Web Firebase

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

Alcuni SDK di prodotto forniscono varianti separate di browser e nodo, ognuna delle quali è fornita nei formati ESM e CJS, e alcuni SDK di prodotto forniscono anche varianti Cordova o React Native. Il Web SDK è 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 SDK sono progettate per aiutare a creare app Web o app client per l'accesso dell'utente finale, 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 tuo codice utilizza le istruzioni Node.js require , l'SDK trova il bundle specifico del nodo. 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 riscontri errori di runtime con l'SDK, assicurati che il tuo bundler sia configurato per dare priorità al tipo corretto di bundle per il tuo ambiente.

Ulteriori informazioni sull'oggetto di configurazione Firebase

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

  • Non consigliamo di modificare manualmente l'oggetto di configurazione, in particolare le seguenti "opzioni Firebase" richieste: 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 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 nella tua app sia aggiornato con i valori di configurazione associati ( rispettivamente measurementId e databaseURL ). 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",
};

Biblioteche disponibili

Ulteriori opzioni di configurazione

Ritardare il caricamento degli SDK Firebase (da CDN)

Puoi ritardare l'inclusione degli SDK Firebase fino al caricamento dell'intera pagina. Se utilizzi script API CDN modulari con <script type="module"> , questo è il comportamento predefinito. Se utilizzi script CDN con spazi dei nomi come modulo, completa questi passaggi per rinviare il caricamento:

  1. Aggiungi un flag defer a ciascun tag script 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>

  2. 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);

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:

Web modular API

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 namespaced API

// 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, 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 di Firebase ti consente di inizializzare e utilizzare più progetti Firebase in un'unica app contemporaneamente, con ciascun progetto che utilizza le proprie informazioni di configurazione Firebase.

Web modular API

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 namespaced API

// 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 JavaScript di Firebase richiedono che tu pubblichi la tua app Web da un server anziché dal file system locale. Puoi utilizzare la CLI 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 la CLI Firebase, uno strumento da riga di comando.

  1. Visita la documentazione della CLI di Firebase per scoprire come installare la CLI o eseguire l'aggiornamento alla versione più recente .

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

    firebase init

  3. Avviare 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 di Firebase

Firebase supporta lo sviluppo open source e incoraggiamo 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 pubblico Firebase GitHub .

Esempi di avvio rapido

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