Auf das modulare Web SDK (Version 9) umstellen

Für Apps, in denen derzeit die Web SDK-Version 8 oder niedriger verwendet wird, empfiehlt es sich, anhand der Anleitung in diesem Leitfaden auf Version 9 umzustellen.

In diesem Leitfaden wird davon ausgegangen, dass Sie mit Version 8 vertraut sind und für das Upgrade und die kontinuierliche Entwicklung von Version 9 einen Modul-Bundler wie webpack oder Rollup verwenden.

Wir empfehlen dringend, in Ihrer Entwicklungsumgebung einen Modul-Bundler zu verwenden. Andernfalls können Sie die Hauptvorteile von Version 9 in Bezug auf die reduzierte App-Größe nicht nutzen. Sie benötigen npm oder yarn, um das SDK zu installieren.

Compat-Bibliotheken

Für die 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) vereinfacht, um Ihre Webanwendung so klein und schnell wie möglich zu machen.
  • Compat: Eine vertraute API-Oberfläche, die vollständig mit Version 8 kompatibel ist. So können Sie auf Version 9 upgraden, ohne den gesamten SDK-Code auf einmal zu ändern. Compat-Bibliotheken bieten im Vergleich zu ihren Version 8-Entsprechungen kaum bis gar keine Vorteile in Bezug auf Größe oder Leistung.

In diesem Leitfaden wird davon ausgegangen, dass Sie die Bibliotheken zur Kompatibilität mit Version 9 verwenden, um das Upgrade zu erleichtern. Mit diesen Bibliotheken können Sie weiterhin Code der Version 8 zusammen mit Code verwenden, der für Version 9 umgeschrieben wurde. So können Sie Ihre App beim Upgrade einfacher kompilieren und debuggen.

Bei Apps, die nur sehr wenig mit dem Web SDK interagieren, kann es sinnvoll sein, den Code der Version 8 zu überarbeiten, ohne die Bibliotheken zur Kompatibilität mit Version 9 zu verwenden. Wenn Sie eine solche App aktualisieren, können Sie der Anleitung in diesem Leitfaden für „Version 9 – modular“ folgen, ohne die Kompatibilitätsbibliotheken zu verwenden.

Informationen zum Upgrade-Prozess

Jeder Schritt des Upgrade-Prozesses ist so angelegt, dass Sie die Quelldatei für Ihre App fertig bearbeiten und dann ohne Unterbrechungen kompilieren und ausführen können. So aktualisieren Sie eine App:

  1. Fügen Sie Ihrer App die Bibliotheken der Version 9 und die kompatiblen Bibliotheken hinzu.
  2. Aktualisieren Sie die Importanweisungen in Ihrem Code auf Version 9.
  3. Code im modularen Stil umstrukturieren.
  4. Entfernen Sie die Authentifizierungs-Kompatibilitätsbibliothek und den Kompatibilitätscode für die Authentifizierung, um den Vorteil bei der App-Größe zu nutzen.
  5. Aktualisieren Sie den Initialisierungscode auf den modularen Stil.
  6. Entfernen Sie alle verbleibenden Version 9-Kompatibilitätsanweisungen und -Code aus Ihrer App.

SDK-Version 9 herunterladen

Laden Sie zuerst die Version 9-Bibliotheken und die kompatiblen Bibliotheken mit npm herunter (aktuelle Version: https://www.npmjs.com/package/firebase):

npm i firebase@11.0.2

# OR

yarn add firebase@11.0.2

Importe auf Version 9 umstellen

Damit Ihr Code nach der Aktualisierung der Abhängigkeit von Version 8 auf Version 9 funktioniert, ändern Sie Ihre Importanweisungen so, dass die „compat“-Version jedes Imports verwendet wird. Beispiel:

Vorher: Version 8

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';

Nachher: Kompatibilität mit Version 9

// v9 compat packages are API compatible with v8 code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

Zum modularen Stil umstrukturieren

Während die APIs der Version 8 auf einem durch Punkte verknüpften Namespace- und Dienstmuster basieren, wird Ihr Code bei der Version 9 modular organisiert, d. h. hauptsächlich um functions herum. 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 werden einzelne Funktionen exportiert.

In Version 9 werden Dienste als erstes Argument übergeben. Die Funktion verwendet dann die Details des Dienstes, um den Rest zu erledigen.

Beispiel: Eine einfache Authentifizierungsfunktion umstrukturieren

Vorher: Kompatibilität mit Version 9

Der Code für die Kompatibilität mit Version 9 ist mit dem Code für Version 8 identisch, die Importe haben sich jedoch geändert. Wenn Sie die Compat-Bibliotheken während des Upgrades verwenden, können Sie den Code von Version 8 zusammen mit dem für Version 9 neu strukturierten Code weiterverwenden.

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 Funktion getAuth verwendet firebaseApp als ersten Parameter. Die Funktion onAuthStateChanged wird nicht wie in Version 8 über die Authentifizierungs-Instanz verkettet. Stattdessen ist sie eine freie Funktion, die auth als ersten Parameter annimmt.

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

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

Initialisierungscode aktualisieren

Aktualisieren Sie den Initialisierungscode Ihrer App, um die neue Syntax der modularen Version 9 zu verwenden. Es ist wichtig, diesen Code nach dem Refactoring des gesamten Codes in Ihrer App zu aktualisieren. Das liegt daran, dass firebase.initializeApp() den globalen Status sowohl für die kompatiblen als auch für die modularen APIs initialisiert, während die modulare initializeApp()-Funktion nur den Status für modular initialisiert.

Vorher: Kompatibilität mit Version 9

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

Wenn Sie die Vorteile des modularen SDKs der Version 9 in Bezug auf die Größe nutzen möchten, sollten Sie alle Aufrufe in den oben gezeigten modularen Stil umwandeln und alle import "firebase/compat/*-Anweisungen aus Ihrem Code entfernen. Wenn Sie fertig sind, sollten keine Verweise mehr auf den globalen Namespace firebase.* oder anderen Code im SDK-Stil der Version 8 vorhanden sein.

Vorteile und Einschränkungen von Version 9

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

  • Version 9 ermöglicht eine drastische Reduzierung der App-Größe. Es verwendet das moderne JavaScript-Modulformat und ermöglicht das „Tree Shaking“, bei dem nur die Artefakte importiert werden, die für Ihre App erforderlich sind. Je nach App kann das Tree Shaking mit Version 9 zu 80% weniger Kilobyten führen als bei einer vergleichbaren App, die mit Version 8 erstellt wurde.
  • Version 9 profitiert weiterhin von der laufenden Funktionsentwicklung, während Version 8 zu einem späteren Zeitpunkt eingefroren wird.