Catch up on everthing we announced at this year's Firebase Summit. Learn more

Upgrade von Version 8 auf das modulare Web SDK

Apps, die derzeit Firebase Web SDK Version 8 oder früher verwenden, sollten eine Migration auf Version 9 in Betracht ziehen, indem Sie die Anweisungen in dieser Anleitung befolgen.

Es wird vorausgesetzt , dass Sie vertraut sind mit der Version 8 und dass Sie die Vorteile eines Moduls bundler wie nehmen webpack oder Rollup für den Ausbau und die laufende Version 9 Entwicklung.

Die Verwendung eines Modulbundlers in Ihrer Entwicklungsumgebung wird dringend empfohlen. Wenn Sie keine verwenden, können Sie die Hauptvorteile von Version 9 in der reduzierten App-Größe nicht nutzen. Sie müssen npm oder Garn das SDK installieren.

Die Upgrade-Schritte in dieser Anleitung basieren auf einer imaginären Web-App, die die Authentifizierungs- und Cloud Firestore-SDKs verwendet. Wenn Sie die Beispiele durcharbeiten, können Sie die Konzepte und praktischen Schritte beherrschen, die zum Upgrade aller unterstützten Firebase Web SDKs erforderlich sind.

Über die Compat-Bibliotheken

Für Firebase Web SDK Version 9 sind zwei Arten von Bibliotheken verfügbar:

  • Modular - eine neue API - Oberfläche entworfen Baum Schütteln (Entfernen von nicht verwendetem Code) zu erleichtern , Ihre Webanwendung so klein und schnell wie möglich zu machen.
  • Compat - eine vertraute API Oberfläche , die mit der Version 8 SDK kompatibel ist, so dass Sie auf die Version 9 aktualisieren , ohne alle Ihre Firebase Code auf einmal zu ändern. Compat-Bibliotheken haben gegenüber ihren Pendants der Version 8 kaum bis gar keine Größen- oder Leistungsvorteile.

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 zusammen mit Code, der für Version 9 umgestaltet wurde, weiterhin zu verwenden. Dies bedeutet, dass Sie Ihre App einfacher kompilieren und debuggen können, während Sie den Upgrade-Prozess durchlaufen.

Für Apps mit sehr geringem Zugriff auf das Firebase Web SDK – beispielsweise eine App, die nur einen einfachen Aufruf an die Authentifizierungs-APIs durchführt – kann es praktisch sein, den Code der Version 8 zu refaktorisieren, ohne die kompatiblen Bibliotheken 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 Compat-Bibliotheken zu verwenden.

Über den Upgrade-Prozess

Jeder Schritt des Upgradeprozesses ist so ausgelegt, dass Sie die Bearbeitung der Quelle für Ihre App abschließen und sie dann ohne Unterbrechung kompilieren und ausführen können. Zusammenfassend gehen Sie wie folgt vor, um eine App zu aktualisieren:

  1. Fügen Sie Ihrer App die Bibliotheken der Version 9 und die Compat-Bibliotheken hinzu.
  2. Aktualisieren Sie die Importanweisungen in Ihrem Code auf v9-kompat.
  3. Refactoring von Code für ein einzelnes Produkt (z. B. Authentifizierung) in den modularen Stil.
  4. Optional: Entfernen Sie an dieser Stelle die Authentifizierungs-Kompatibilitätsbibliothek und den Kompatcode für die Authentifizierung, um den Vorteil der App-Größe für die Authentifizierung zu nutzen, bevor Sie fortfahren.
  5. Refactoring-Funktionen für jedes Produkt (z. B. Cloud Firestore, FCM usw.) auf den modularen Stil, Kompilieren und Testen, bis alle Bereiche abgeschlossen sind.
  6. Aktualisieren Sie den Initialisierungscode auf den modularen Stil.
  7. Entfernen Sie alle verbleibenden Compat-Anweisungen der Version 9 und den Compat-Code aus Ihrer App.

Holen Sie sich das Version 9 SDK

Holen Sie sich zunächst die Bibliotheken der Version 9 und die Compat-Bibliotheken mit npm:

npm i firebase@9.5.0

# OR

yarn add firebase@9.5.0

Aktualisieren Sie Importe auf v9-kompat

Damit Ihr Code auch nach dem Aktualisieren Ihrer Abhängigkeit von v8 auf v9 Beta funktioniert, ändern Sie Ihre Importanweisungen so, dass die "Compat"-Version jedes Imports verwendet wird. 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';

Umgestalten auf den modularen Stil

Während die Version 8 APIs auf einem Punkt-gekettet Namespace und Service - Muster basieren, modularer Ansatz Mittel-Version 9 , dass Ihr Code wird in erster Linie um Funktionen organisiert werden. In der Version 9, die firebase/app tun Paket und andere Pakete nicht einen umfassenden Export zurück , die alle Methoden aus dem Paket enthalten ist . 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 dies an zwei Beispielen an, in denen Aufrufe an die Authentifizierungs- und Cloud Firestore-APIs umgestaltet werden.

Beispiel 1: Refactoring einer Authentifizierungsfunktion

Vorher: Version 9 kompatibel

Der Compat-Code 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 nimmt firebaseApp als ersten Parameter. Die onAuthStateChanged Funktion wird nicht von der verketteten auth Instanz , wie es 8 in Version sein würde; Stattdessen ist es eine kostenlose Funktion , die nimmt auth als ersten Parameter.

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => {
  // Check for user status
});

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 nimmt firebaseApp als erste Parameter, der von zurückgegeben wurde initializeApp in einem früheren Beispiel. Beachten Sie, dass sich der Code zum Bilden einer Abfrage in Version 9 stark unterscheidet. gibt es keine Verkettung und Methoden wie query oder where sind jetzt als freie Funktionen ausgesetzt.

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());
});

Beispiel 3: Kombinieren von Codestilen der Versionen 8 und 9

Wenn Sie die Compat-Bibliotheken während des Upgrades verwenden, können Sie weiterhin den Code der Version 8 neben dem für Version 9 umgestalteten Code verwenden. Das bedeutet, dass Sie den vorhandenen Code der Version 8 für Cloud Firestore beibehalten können, während Sie die Authentifizierung oder anderen Firebase SDK-Code auf den Stil der Version 9 umgestalten. Kompilieren Sie Ihre App erfolgreich mit beiden Codestilen. Das gleiche gilt für die Version 8 und Version 9 - Code innerhalb eines Produkts wie Cloud Firestor wahr; neue und alte Codestile können nebeneinander existieren, solange Sie die Compat-Pakete importieren:

import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
import { getDoc } from 'firebase/firestore'

const docRef = firebase.firestore().doc();
getDoc(docRef);

Beachten Sie, dass Ihre App zwar kompiliert wird, Sie jedoch die Vorteile der App-Größe des modularen Codes erst dann nutzen, wenn Sie die compat-Anweisungen und den Code vollständig aus Ihrer App entfernen.

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 den gesamten Code in der App abgeschlossen haben Refactoring; Dies liegt daran , dass firebase.initializeApp() sowohl globale Zustand für die compat und modulare APIs initialisiert, während die modulare initializeApp() Funktion nur den Zustand für modulare 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 */ });

Compat-Code entfernen

Um die Größe Vorteile der Version 9 modulare SDK zu erkennen, sollten Sie schließlich alle Anrufungen des modularen Stil umwandeln oben gezeigt , und entfernen Sie alle der import "firebase/compat/* Anweisungen aus dem Code. Wenn Sie fertig sind, sollte es keine weitere Hinweise auf die firebase.* globaler Namensraum oder ein anderer Code in der Version 8 SDK Stil.

Verwenden der Compat-Bibliothek aus dem Fenster

Die Version 9 SDK wird mit Modulen zur Arbeit optimiert , anstatt die Browser - window - Objekt. Frühere Versionen der Bibliothek erlaubt das Laden und das Management von Firebase durch die Verwendung von window.firebase Namespace. Dies wird in Zukunft nicht empfohlen, da es keine Eliminierung von ungenutztem Code zulässt. Allerdings ist die compat Version der JavaScript SDK Arbeit mit dem window für Entwickler , die es vorziehen , nicht sofort auf das modulare Upgrade zu beginnen.

<script src="https://www.gstatic.com/firebasejs/9.5.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.5.0/firebase-firestore-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.5.0/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 bietet dieselbe API wie das SDK der Version 8; dies bedeutet , dass Sie auf die beziehen Version 8 - API - Referenz und Version 8 Code - Schnipsel für weitere Einzelheiten. Diese Methode wird nicht für den langfristigen Einsatz empfohlen, sondern als Einstieg für ein Upgrade auf die vollständig modulare Version 9-Bibliothek.

Vorteile und Einschränkungen der Version 9

Die vollständig modularisierte Version 9 bietet gegenüber früheren Versionen folgende Vorteile:

  • Version 9 ermöglicht eine drastisch reduzierte App-Größe. Es verwendet das moderne JavaScript-Modulformat, das "Baumschüttel"-Praktiken ermöglicht, bei denen Sie nur die Artefakte importieren, die Ihre App benötigt. Je nach App kann Tree-Shaking mit Version 9 zu 80 % weniger Kilobyte führen als eine vergleichbare App, die mit Version 8 erstellt wurde.
  • Version 9 wird weiterhin von der Weiterentwicklung der Features profitieren, während Version 8 zu einem späteren Zeitpunkt eingefroren wird.