Il design modulare dell'SDK Firebase JS ti offre un controllo molto maggiore sul modo in cui viene creata la tua app. Questa flessibilità ti consente di personalizzare le dipendenze per la tua piattaforma e ottimizzare le dimensioni del pacchetto eliminando le funzionalità che non ti servono.
Esistono due modi per inizializzare la libreria Auth: la funzione getAuth() e la funzione initializeAuth() . Il primo, getAuth() , fornisce tutto ciò di cui la tua app ha bisogno per sfruttare tutte le funzionalità che la libreria Auth ha da offrire. Lo svantaggio è che inserisce molto codice potenzialmente inutilizzato dalla tua app. Potrebbe anche inserire codice che semplicemente non è supportato sulla piattaforma di destinazione, causando errori. Per evitare questi problemi, puoi utilizzare initializeAuth() , che accetta una mappa delle dipendenze. La funzione getAuth() chiama semplicemente initializeAuth() con tutte le dipendenze specificate. Per illustrare, ecco l'equivalente di getAuth() negli ambienti browser:
import {initializeAuth, browserLocalPersistence, browserPopupRedirectResolver, browserSessionPersistence, indexedDBLocalPersistence} from "firebase/auth";
import {initializeApp} from "firebase/app";
const app = initializeApp({/** Your app config */});
const auth = initializeAuth(app, {
persistence: [indexedDBLocalPersistence, browserLocalPersistence, browserSessionPersistence],
popupRedirectResolver: browserPopupRedirectResolver,
});
Personalizzare le tue dipendenze
Non tutte le app utilizzano la famiglia di funzioni signInWithPopup o signInWithRedirect . Molte app non avranno bisogno della flessibilità fornita da indexedDB o non avranno bisogno della capacità di supportare sia indexedDB che localStorage nel caso in cui uno non fosse disponibile. In questi casi, getAuth() predefinito include molto codice inutilizzato che aumenta le dimensioni del bundle senza motivo. Invece, queste app possono personalizzare le proprie dipendenze. Ad esempio, se la tua app utilizza solo l'autenticazione del collegamento e-mail e localStorage è sufficiente (perché non stai utilizzando script Web o Service Worker), puoi eliminare molto codice in eccesso inizializzando Auth in questo modo:
import {initializeAuth, browserLocalPersistence} from "firebase/auth";
import {initializeApp} from "firebase/app";
const app = initializeApp({/** Your app config */});
const auth = initializeAuth(app, {
persistence: browserLocalPersistence,
// No popupRedirectResolver defined
});
Con questo codice, hai rimosso tre grandi dipendenze di cui la tua app non ha bisogno, riducendo in modo significativo la quantità di larghezza di banda utilizzata dagli utenti ogni volta che visitano il tuo sito.
Considerazioni specifiche della piattaforma
In molti casi, è necessario definire manualmente le dipendenze Auth per evitare errori durante l'inizializzazione. La funzione getAuth() presuppone una piattaforma specifica. Per il punto di ingresso predefinito, ovvero un ambiente browser e per il punto di ingresso Cordova, si tratta di un ambiente Cordova. Ma a volte le esigenze della tua particolare applicazione si scontrano con questi presupposti. Per gli script Web e Service Worker, ad esempio, l'implementazione getAuth() predefinita inserisce il codice che legge dall'oggetto window , il che causerà errori. In questi casi, è necessario personalizzare le proprie dipendenze. Il codice seguente è appropriato per inizializzare la libreria Auth in un contesto di service lavoratore:
import {initializeAuth, indexedDBLocalPersistence} from "firebase/auth";
import {initializeApp} from "firebase/app";
const app = initializeApp({/** Your app config */});
const auth = initializeAuth(app, {
persistence: indexedDBLocalPersistence,
// No popupRedirectResolver defined
});
Questo codice indica ad Auth di inizializzare con la persistenza indexedDB (disponibile nei contesti di lavoro) e omette la dipendenza popupRedirectResolver , che presuppone che sia disponibile un contesto DOM.
Esistono altri motivi per cui potresti definire manualmente le dipendenze su determinate piattaforme. Definendo il campo popupRedirectResolver nell'inizializzazione Auth, in alcuni casi la libreria eseguirà un lavoro aggiuntivo sull'inizializzazione. Sui browser mobili, la libreria aprirà automaticamente e preventivamente un iframe nel tuo dominio di autenticazione. Questo viene fatto per rendere l'esperienza fluida per la maggior parte degli utenti, ma può influire sulle prestazioni caricando codice aggiuntivo proprio all'avvio dell'app. Questo comportamento può essere evitato utilizzando initializeAuth() e passando manualmente la dipendenza browserPopupRedirectResolver alle funzioni che ne hanno bisogno:
import {initializeAuth, browserLocalPersistence, browserPopupRedirectResolver, indexedDBLocalPersistence, signInWithRedirect, GoogleAuthProvider} from "firebase/auth";
import {initializeApp} from "firebase/app";
const app = initializeApp({/** Your app config */});
const auth = initializeAuth(app, {
persistence: [indexedDBLocalPersistence, browserLocalPersistence],
});
// Later
signInWithRedirect(auth, new GoogleAuthProvider(), browserPopupRedirectResolver);
Se avessimo fornito browserPopupRedirectResolver nelle dipendenze di initializeAuth() , il terzo parametro nella chiamata a signInWithRedirect() non sarebbe stato necessario. Ma spostando direttamente tale dipendenza nella chiamata a signInWithRedirect() , il calo iniziale delle prestazioni durante l'inizializzazione viene rimosso. Ci sono dei compromessi che derivano dallo spostamento della dipendenza, ma la parte importante è che puoi prendere decisioni su tali compromessi inizializzando manualmente la libreria.
Quando utilizzare l'inizializzazione personalizzata
Ricapitolando, l'inizializzazione personalizzata ti offre un controllo molto maggiore sull'utilizzo dell'SDK Auth da parte della tua app. La funzione getAuth() standard è utile per iniziare e serve la maggior parte dei casi d'uso. Per la maggior parte delle app, getAuth() potrebbe essere tutto ciò di cui hai bisogno. Ma ci sono molti motivi per cui potresti voler (o aver bisogno) di passare alla gestione manuale delle dipendenze:
- Per le app in cui le dimensioni del bundle e i tempi di caricamento sono estremamente importanti, l'inizializzazione dell'autenticazione personalizzata può potenzialmente ridurre molti kilobyte di dati. Può anche ridurre i tempi di caricamento iniziale spostando le dipendenze al momento dell'utilizzo anziché al momento dell'inizializzazione.
- Per il codice eseguito in contesti non DOM (come i lavoratori Web e di servizio), è necessario utilizzare
initializeAuth()per evitare errori.