Apps, die derzeit Firebase Web SDK Version 8 oder früher verwenden, sollten die Migration auf Version 9 anhand der Anweisungen in diesem Handbuch in Betracht ziehen.
In diesem Handbuch wird davon ausgegangen, dass Sie mit Version 8 vertraut sind und dass Sie einen Modul-Bundler wie Webpack oder Rollup für Upgrades und die fortlaufende Entwicklung von Version 9 nutzen werden.
Die Verwendung eines Modul-Bundlers in Ihrer Entwicklungsumgebung wird dringend empfohlen. Wenn Sie keine verwenden, können Sie die Hauptvorteile der Version 9 in der reduzierten App-Größe nicht nutzen. Sie benötigen npm oder Garn , um das SDK zu installieren.
Die Upgrade-Schritte in diesem Leitfaden basieren auf einer imaginären Web-App, die die Authentifizierungs- und Cloud Firestore-SDKs verwendet. Indem Sie die Beispiele durcharbeiten, beherrschen Sie die Konzepte und praktischen Schritte, die zum Upgrade aller unterstützten Firebase-Web-SDKs erforderlich sind.
Über die Kompatibilitätsbibliotheken
Für Firebase Web SDK Version 9 sind zwei Arten von Bibliotheken verfügbar:
- Modular – eine neue API-Oberfläche, die das Tree-Shaking (Entfernen von nicht verwendetem Code) erleichtert, um Ihre Web-App so klein und schnell wie möglich zu machen.
- Compat – eine vertraute API-Oberfläche, die vollständig mit dem Version 8 SDK kompatibel ist, sodass Sie ein Upgrade auf Version 9 durchführen können, ohne Ihren gesamten Firebase-Code auf einmal zu ändern. Kompatible Bibliotheken haben wenig bis gar keine Größen- oder Leistungsvorteile gegenüber ihren Gegenstücken der Version 8.
In diesem Handbuch wird davon ausgegangen, dass Sie die Kompatibilitätsbibliotheken der Version 9 nutzen, um Ihr Upgrade zu erleichtern. Diese Bibliotheken ermöglichen es Ihnen, Code der Version 8 weiterhin neben Code zu verwenden, der für Version 9 umgestaltet wurde. Das bedeutet, dass Sie Ihre App einfacher kompilieren und debuggen können, während Sie den Upgrade-Prozess durchlaufen.
Für Apps mit einer sehr geringen Exposition gegenüber dem Firebase Web SDK – beispielsweise eine App, die nur einen einfachen Aufruf an die Authentifizierungs-APIs durchführt – kann es praktisch sein, Code der Version 8 umzugestalten, ohne die Kompatibilitätsbibliotheken der Version 9 zu verwenden. Wenn Sie eine solche App aktualisieren, können Sie den Anweisungen in diesem Handbuch für „Version 9 modular“ folgen, ohne die Kompatibilitätsbibliotheken zu verwenden.
Über den Upgrade-Prozess
Jeder Schritt des Upgrade-Prozesses ist so begrenzt, dass Sie die Bearbeitung der Quelle für Ihre App abschließen und sie dann ohne Unterbrechung kompilieren und ausführen können. Zusammenfassend ist Folgendes zu tun, um eine App zu aktualisieren:
- Fügen Sie Ihrer App die Bibliotheken der Version 9 und die Kompatibilitätsbibliotheken hinzu.
- Aktualisieren Sie import-Anweisungen in Ihrem Code auf v9-kompatibel.
- Code für ein einzelnes Produkt (z. B. Authentifizierung) in den modularen Stil umgestalten.
- Optional: Entfernen Sie an dieser Stelle die Authentifizierungs-Kompatibilitätsbibliothek und den Kompatibilitätscode für die Authentifizierung, um den Vorteil der App-Größe für die Authentifizierung zu nutzen, bevor Sie fortfahren.
- Refaktorieren Sie Funktionen für jedes Produkt (z. B. Cloud Firestore, FCM usw.) auf den modularen Stil, Kompilieren und Testen, bis alle Bereiche vollständig sind.
- Aktualisieren Sie den Initialisierungscode auf den modularen Stil.
- Entfernen Sie alle verbleibenden Kompatibilitätsanweisungen und den Kompatibilitätscode der Version 9 aus Ihrer App.
Holen Sie sich das SDK der Version 9
Holen Sie sich zunächst die Bibliotheken und Compat-Bibliotheken der Version 9 mit npm:
npm i firebase@9.22.1 # OR yarn add firebase@9.22.1
Aktualisieren Sie Importe auf v9-kompatibel
Damit Ihr Code nach dem Aktualisieren Ihrer Abhängigkeit von v8 auf v9 beta funktionsfähig bleibt, ändern Sie Ihre import-Anweisungen so, dass sie die „compat“-Version jedes Imports verwenden. Zum Beispiel:
Vorher: Version 8
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
Nachher: Version 9 kompatibel
// v9 compat packages are API compatible with v8 code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
Refaktorieren Sie den modularen Stil
Während die APIs der Version 8 auf einem punktverketteten Namensraum und Dienstmuster basieren, bedeutet der modulare Ansatz der Version 9, dass Ihr Code hauptsächlich um Funktionen herum organisiert wird. In Version 9 geben das firebase/app -Paket und andere Pakete keinen umfassenden Export zurück, der alle Methoden aus dem Paket enthält. Stattdessen exportieren die Pakete einzelne Funktionen.
In Version 9 werden Dienste als erstes Argument übergeben, und die Funktion verwendet dann die Details des Dienstes, um den Rest zu erledigen. Sehen wir uns an, wie dies in zwei Beispielen funktioniert, die Aufrufe an die Authentifizierungs- und Cloud Firestore-APIs umgestalten.
Beispiel 1: Refactoring einer Authentifizierungsfunktion
Vorher: Version 9 kompatibel
Der Kompatibilitätscode der Version 9 ist identisch mit dem Code der Version 8, aber die Importe haben sich geändert.
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
const auth = firebase.auth();
auth.onAuthStateChanged(user => {
// Check for user status
});
Nachher: Version 9 modular
Die getAuth Funktion verwendet firebaseApp als ersten Parameter. Die onAuthStateChanged Funktion ist nicht mit der auth verkettet, wie es in Version 8 der Fall wäre; Stattdessen ist es eine freie Funktion, die auth als ersten Parameter verwendet.
import { getAuth, onAuthStateChanged } from "firebase/auth";
const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => {
// Check for user status
});
Handhabung der Auth-Methode getRedirectResult
Version 9 führt eine bahnbrechende Änderung in getRedirectResult ein. Wenn keine Umleitungsoperation aufgerufen wird, gibt Version 9 null zurück, im Gegensatz zu Version 8, die ein UserCredential mit einem null zurückgab.
Vorher: Version 9 kompatibel
const result = await auth.getRedirectResult()
if (result.user === null && result.credential === null) {
return null;
}
return result;
Nachher: Version 9 modular
const result = await getRedirectResult(auth);
// Provider of the access token could be Facebook, Github, etc.
if (result === null || provider.credentialFromResult(result) === null) {
return null;
}
return result;
Beispiel 2: Refactoring einer Cloud Firestore-Funktion
Vorher: Version 9 kompatibel
import "firebase/compat/firestore"
const db = firebase.firestore();
db.collection("cities").where("capital", "==", true)
.get()
.then((querySnapshot) => {
querySnapshot.forEach((doc) => {
// doc.data() is never undefined for query doc snapshots
console.log(doc.id, " => ", doc.data());
});
})
.catch((error) => {
console.log("Error getting documents: ", error);
});
Nachher: Version 9 modular
Die getFirestore Funktion verwendet firebaseApp als ersten Parameter, der in einem früheren Beispiel von initializeApp zurückgegeben wurde. Beachten Sie, dass der Code zum Erstellen einer Abfrage in Version 9 sehr unterschiedlich ist. es gibt keine Verkettung, und Methoden wie query oder where sind jetzt als freie Funktionen verfügbar.
import { getFirestore, collection, query, where, getDocs } from "firebase/firestore";
const db = getFirestore(firebaseApp);
const q = query(collection(db, "cities"), where("capital", "==", true));
const querySnapshot = await getDocs(q);
querySnapshot.forEach((doc) => {
// doc.data() is never undefined for query doc snapshots
console.log(doc.id, " => ", doc.data());
});
Aktualisieren Sie die Verweise auf Firestore DocumentSnapshot.exists
Version 9 führt eine Breaking Change ein, bei der die Eigenschaft firestore.DocumentSnapshot.exists in eine Methode geändert wurde. Die Funktionalität ist im Wesentlichen dieselbe (Testen, ob ein Dokument vorhanden ist), aber Sie müssen Ihren Code umgestalten, um die v9-Methode wie gezeigt zu verwenden:
Vorher: Version 9 kompatibel
if (snapshot.exists) {
console.log("the document exists");
}
Nachher: Version 9 modular
if (snapshot.exists()) {
console.log("the document exists");
}
Beispiel 3: Kombinieren der Codestile von Version 8 und Version 9
Die Verwendung der Kompatibilitätsbibliotheken während des Upgrades ermöglicht es Ihnen, Code der Version 8 weiterhin neben Code zu verwenden, der für Version 9 umgestaltet wurde. Das bedeutet, dass Sie den vorhandenen Code der Version 8 für Cloud Firestore behalten können, während Sie die Authentifizierung oder anderen Firebase-SDK-Code auf den Stil der Version 9 umgestalten, und immer noch Kompilieren Sie Ihre App erfolgreich mit beiden Codestilen. Dasselbe gilt für Code der Version 8 und Version 9 in einem Produkt wie Cloud Firestore; Neue und alte Codestile können nebeneinander existieren, solange Sie die Kompatibilitätspakete importieren:
import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
import { getDoc } from 'firebase/firestore'
const docRef = firebase.firestore().doc();
getDoc(docRef);
Denken Sie daran, dass Sie, obwohl Ihre App kompiliert wird, die App-Größenvorteile des modularen Codes nicht nutzen können, bis Sie die compat-Anweisungen und den Code vollständig aus Ihrer App entfernt haben.
Initialisierungscode aktualisieren
Aktualisieren Sie den Initialisierungscode Ihrer App, um die neue modulare Syntax der Version 9 zu verwenden. Es ist wichtig, diesen Code zu aktualisieren, nachdem Sie die Umgestaltung des gesamten Codes in Ihrer App abgeschlossen haben. Dies liegt daran, dass firebase.initializeApp() den globalen Status sowohl für die Compat- als auch für die modulare API initialisiert, während die modulare initializeApp() Funktion nur den Status für modular initialisiert.
Vorher: Version 9 kompatibel
import firebase from "firebase/compat/app"
firebase.initializeApp({ /* config */ });
Nachher: Version 9 modular
import { initializeApp } from "firebase/app"
const firebaseApp = initializeApp({ /* config */ });
Kompatiblen Code entfernen
Um die Größenvorteile des modularen SDK der Version 9 zu nutzen, sollten Sie schließlich alle Aufrufe in den oben gezeigten modularen Stil konvertieren und alle import "firebase/compat/* Anweisungen aus Ihrem Code entfernen. Wenn Sie fertig sind, sollte es no Weitere Verweise auf den globalen Namespace firebase.* oder anderen Code im SDK-Stil der Version 8.
Verwenden der Compat-Bibliothek aus dem Fenster
Das SDK der Version 9 ist optimiert, um mit Modulen und nicht mit dem window des Browsers zu arbeiten. Frühere Versionen der Bibliothek ermöglichten das Laden und Verwalten von Firebase mithilfe des window.firebase Namespace. Dies wird für die Zukunft nicht empfohlen, da es keine Eliminierung von unbenutztem Code zulässt. Die kompatible Version des JavaScript-SDK funktioniert jedoch mit dem window für Entwickler, die es vorziehen, nicht sofort mit dem modularen Upgrade-Pfad zu beginnen.
<script src="https://www.gstatic.com/firebasejs/9.22.1/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.22.1/firebase-firestore-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.22.1/firebase-auth-compat.js"></script>
<script>
const firebaseApp = firebase.initializeApp({ /* Firebase config */ });
const db = firebaseApp.firestore();
const auth = firebaseApp.auth();
</script>
Die Kompatibilitätsbibliothek verwendet den modularen Code der Version 9 unter der Haube und stellt ihm dieselbe API wie das SDK der Version 8 zur Verfügung; Das bedeutet, dass Sie sich auf die API-Referenz der Version 8 und die Codeausschnitte der Version 8 für Details beziehen können. Diese Methode wird nicht für die langfristige Verwendung empfohlen, sondern als Start für ein Upgrade auf die vollständig modulare Bibliothek der Version 9.
Vorteile und Einschränkungen der Version 9
Die vollständig modularisierte Version 9 hat diese Vorteile gegenüber früheren Versionen:
- Version 9 ermöglicht eine drastisch reduzierte App-Größe. Es übernimmt das moderne JavaScript-Modulformat und ermöglicht „Tree Shaking“-Praktiken, bei denen Sie nur die Artefakte importieren, die Ihre App benötigt. Abhängig von Ihrer App kann Treeshaking mit Version 9 zu 80 % weniger Kilobyte führen als bei einer vergleichbaren App, die mit Version 8 erstellt wurde.
- Version 9 wird weiterhin von der laufenden Funktionsentwicklung profitieren, während Version 8 zu einem späteren Zeitpunkt eingefroren wird.