Firebase für das Web

Bei der Entwicklung einer Web-App mit Firebase stoßen Sie möglicherweise auf ungewohnte Konzepte oder Bereiche, in denen Sie mehr Informationen benötigen, um die richtigen Entscheidungen für Ihr Projekt zu treffen. Diese Seite soll diese Fragen beantworten oder Sie auf Informationsquellen verweisen, um mehr zu erfahren.

Wenn Sie Fragen zu einem Thema haben, das auf dieser Seite nicht behandelt wird, besuchen Sie eine unserer Online-Communities. Wir werden diese Seite regelmäßig mit neuen Themen aktualisieren. Schauen Sie also immer wieder vorbei, um zu sehen, ob wir das Thema, über das Sie mehr erfahren möchten, bereits hinzugefügt haben.

SDK-Versionen: Namensraumbasiert und modular

Firebase bietet zwei API-Schnittstellen für Webanwendungen:

  • JavaScript - namespaced. Dies ist die JavaScript-Schnittstelle, die Firebase viele Jahre lang gepflegt hat und die Webentwicklern mit älteren Firebase-Apps vertraut ist. Da die Namespaced API nicht von der kontinuierlichen Unterstützung neuer Funktionen profitiert, sollten die meisten neuen Anwendungen stattdessen die modulare API verwenden.
  • JavaScript – modular Dieses SDK basiert auf einem modularen Ansatz, der für eine geringere SDK-Größe und eine höhere Effizienz mit modernen JavaScript-Build-Tools wie webpack oder Rollup sorgt.

Die modulare API lässt sich gut in Build-Tools integrieren, die nicht verwendeten Code in Ihrer App entfernen – ein Prozess, der als „Tree-Shaking“ bekannt ist. Mit diesem SDK erstellte Apps profitieren von einem deutlich reduzierten Speicherbedarf. Die Namespaced API ist zwar als Modul verfügbar, verfügt aber nicht über eine streng modulare Struktur und bietet nicht denselben Grad an Größenreduzierung.

Obwohl der Großteil der modularen API den gleichen Mustern wie die Namespaced API folgt, ist die Organisation des Codes unterschiedlich. Im Allgemeinen ist die Namespaced API auf ein Namespace- und Service-Muster ausgerichtet, während die modulare API auf diskrete Funktionen ausgerichtet ist. Beispielsweise wird die Punktverkettung der Namespaced API, wie etwa firebaseApp.auth(), in der modularen API durch eine einzelne getAuth() Funktion ersetzt, die firebaseApp entgegennimmt und eine Authentication Instanz zurückgibt.

Dies bedeutet, dass Webanwendungen, die mit der Namespaced API erstellt wurden, ein Refactoring erfordern, um die Vorteile des modularen Anwendungsdesigns nutzen zu können. Weitere Details finden Sie im Upgrade-Leitfaden.

JavaScript – modulare API für neue Apps

Wenn Sie mit einer neuen Integration mit Firebase beginnen, können Sie sich für die modulare API entscheiden, wenn Sie das SDK hinzufügen und initialisieren.

Denken Sie bei der Entwicklung Ihrer App daran, dass Ihr Code hauptsächlich um Funktionen herum organisiert sein wird. In der modularen API werden Dienste als erstes Argument übergeben, und die Funktion nutzt dann die Details des Dienstes, um den Rest zu erledigen. Beispiel:

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

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

Weitere Beispiele und Details finden Sie in den Leitfäden für die einzelnen Produktbereiche sowie in der modularen API-Referenzdokumentation.

Web-SDKs in Ihre App einfügen

Firebase stellt JavaScript-Bibliotheken für die meisten Firebase-Produkte bereit, darunter Remote Config und FCM. Wie Sie Firebase SDKs in Ihre Web-App einfügen, hängt davon ab, welche Tools Sie für Ihre App verwenden (z. B. ein Modul-Bundler).

Sie können jede der verfügbaren Bibliotheken über eine der unterstützten Methoden zu Ihrer App hinzufügen:

  • npm (für Modul-Bundler)
  • CDN (Content Delivery Network)

Ausführliche Anweisungen zur Einrichtung finden Sie unter Firebase zu Ihrer JavaScript-App hinzufügen. Der Rest dieses Abschnitts enthält Informationen, die Ihnen bei der Auswahl der verfügbaren Optionen helfen.

npm

Durch das Herunterladen des Firebase npm-Pakets (das sowohl Browser- als auch Node.js-Bundles enthält) erhalten Sie eine lokale Kopie des Firebase SDK, die für Nicht-Browser-Anwendungen wie Node.js-Apps, React Native oder Electron benötigt werden kann. Der Download enthält Node.js- und React Native-Bundles als Option für einige Pakete. Die Node.js-Bundles sind für den serverseitigen Rendering-Schritt (SSR) von SSR-Frameworks erforderlich.

Wenn Sie npm mit einem Modul-Bundler wie webpack oder Rollup verwenden, haben Sie Optimierungsoptionen, um ungenutzten Code zu entfernen und gezielte Polyfills anzuwenden. Dadurch kann die Größe Ihrer App erheblich reduziert werden. Die Implementierung dieser Funktionen kann Ihre Konfiguration und Build-Kette etwas komplexer machen, aber verschiedene gängige CLI-Tools können dabei helfen. Zu diesen Tools gehören Angular, React, Vue und Next.

Zusammenfassung:

  • Bietet eine wertvolle Optimierung der App-Größe.
  • Für die Verwaltung von Modulen stehen robuste Werkzeuge zur Verfügung.
  • Für SSR mit Node.js erforderlich

CDN (Content Delivery Network)

Das Hinzufügen von Bibliotheken, die auf dem CDN von Firebase gespeichert sind, ist eine einfache SDK-Einrichtungsmethode, die vielen Entwicklern bekannt sein dürfte. Durch die Verwendung des CDN zum Hinzufügen der SDKs benötigen Sie kein Build-Tool, und Ihre Build-Kette ist im Vergleich zu Modulbundlern tendenziell einfacher und leichter zu handhaben. Wenn Ihnen die Größe der installierten App nicht besonders wichtig ist und Sie keine speziellen Anforderungen haben, wie z. B. das Transpilieren von TypeScript, dann könnte CDN eine gute Wahl sein.

Zusammenfassung:

  • Vertraut und einfach
  • Geeignet, wenn die App-Größe keine große Rolle spielt
  • Geeignet, wenn Ihre Website keine Build-Tools verwendet.

Firebase Web SDK-Varianten

Das Firebase Web-SDK kann sowohl in Browser- als auch in Node-Anwendungen verwendet werden. Allerdings sind einige Produkte in Node-Umgebungen nicht verfügbar. Siehe die Liste der unterstützten Umgebungen.

Einige Produkt-SDKs bieten separate Browser- und Node-Varianten an, die jeweils sowohl im ESM- als auch im CJS-Format bereitgestellt werden, und einige Produkt-SDKs bieten sogar Cordova- oder React Native-Varianten an. Das Web-SDK ist so konfiguriert, dass es die richtige Variante basierend auf Ihrer Tool-Konfiguration oder Umgebung bereitstellt und in den meisten Fällen keine manuelle Auswahl erfordert. Alle SDK-Varianten sind darauf ausgelegt, Web- oder Client-Apps für den Endnutzerzugriff zu erstellen, z. B. in einer Node.js-Desktop- oder IoT-Anwendung. Wenn Sie administrativen Zugriff aus privilegierten Umgebungen (wie Servern) einrichten möchten, verwenden Sie stattdessen Firebase Admin SDK.

Umgebungserkennung mit Bundlern und Frameworks

Bei der Installation des Firebase Web SDK mit npm werden sowohl die JavaScript- als auch die Node.js-Version installiert. Das Paket bietet eine detaillierte Umgebungserkennung, um die richtigen Bundles für Ihre Anwendung zu aktivieren.

Wenn Ihr Code Node.js require-Anweisungen verwendet, findet das SDK das Node-spezifische Bundle. Andernfalls müssen die Einstellungen Ihres Bundlers korrekt sein, um das richtige Einstiegspunktfeld in Ihrer package.json-Datei zu erkennen (z. B. main, browser oder module). Falls Laufzeitfehler mit dem SDK auftreten, überprüfen Sie, ob Ihr Bundler so konfiguriert ist, dass er den richtigen Bundle-Typ für Ihre Umgebung priorisiert.

Erfahren Sie mehr über das Firebase-Konfigurationsobjekt.

Zum Initialisieren von Firebase in Ihrer App müssen Sie die Firebase-Konfiguration Ihrer App angeben. Sie können Ihr Firebase-Konfigurationsobjekt jederzeit abrufen.

  • Wir raten davon ab, das Konfigurationsobjekt manuell zu bearbeiten, insbesondere die folgenden erforderlichen Firebase-Optionen: apiKey, projectId und appID. Wenn Sie Ihre App mit ungültigen oder fehlenden Werten für diese erforderlichen „Firebase-Optionen“ initialisieren, kann es bei Nutzern Ihrer App zu schwerwiegenden Problemen kommen. Die einzige Ausnahme ist authDomain, das gemäß den Best Practices für die Verwendung von signInWithRedirect aktualisiert werden kann.

  • Wenn Sie Google Analytics in Ihrem Firebase-Projekt aktiviert haben, enthält Ihr Konfigurationsobjekt das Feld measurementId. Erfahren Sie mehr über dieses Fachgebiet imAnalytics Erste-Schritte-Seite Die

  • Wenn Sie Google Analytics oder Realtime Database nach der Erstellung Ihrer Firebase-Web-App aktivieren, muss das Firebase-Konfigurationsobjekt, das Sie in Ihrer App verwenden, mit den zugehörigen Konfigurationswerten (measurementId bzw. databaseURL) aktualisiert werden. Sie können Ihr Firebase-Konfigurationsobjekt jederzeit abrufen.

Hier sehen Sie das Format eines Konfigurationsobjekts, in dem alle Dienste aktiviert sind (diese Werte werden automatisch eingefügt):

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",
  // The value of `storageBucket` depends on when you provisioned your default bucket (learn more)
  storageBucket: "PROJECT_ID.firebasestorage.app",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
  measurementId: "G-MEASUREMENT_ID",
};

Verfügbare Bibliotheken

Zusätzliche Einrichtungsoptionen

Laden von Firebase SDKs (aus dem CDN) verzögern

Sie können das Einbinden der Firebase SDKs verzögern, bis die gesamte Seite geladen wurde. Wenn Sie modulare API CDN-Skripts mit <script type="module"> verwenden, ist dies das Standardverhalten. Wenn Sie CDN-Skripts mit Namespace als Modul verwenden, führen Sie die folgenden Schritte aus, um das Laden zu verzögern:

  1. Fügen Sie jedem script-Tag für die Firebase SDKs ein defer-Flag hinzu und verschieben Sie dann die Initialisierung von Firebase mit einem zweiten Skript, z. B.:

    <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. Erstellen Sie eine init-firebase.js-Datei und fügen Sie Folgendes in die Datei ein:

    // TODO: Replace the following with your app's Firebase configuration
var firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Mehrere Firebase-Projekte in einer einzelnen App verwenden

In den meisten Fällen müssen Sie Firebase nur in einer einzelnen Standard-App initialisieren. Sie können auf zwei gleichwertige Arten auf Firebase zugreifen:

Web

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

// 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

Manchmal müssen Sie jedoch gleichzeitig auf mehrere Firebase-Projekte zugreifen. Sie möchten beispielsweise Daten aus der Datenbank eines Firebase-Projekts lesen, Dateien aber in einem anderen Firebase-Projekt speichern. Möglicherweise möchten Sie auch ein Projekt authentifizieren, während ein zweites Projekt nicht authentifiziert bleibt.

Mit dem Firebase JavaScript SDK können Sie mehrere Firebase-Projekte gleichzeitig in einer einzelnen App initialisieren und verwenden. Jedes Projekt verwendet dabei seine eigenen Firebase-Konfigurationsinformationen.

Web

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

// 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

Betreiben Sie einen lokalen Webserver für die Entwicklung

Wenn Sie eine Web-App entwickeln, müssen Sie einige Teile des Firebase JavaScript SDK über einen Server und nicht über das lokale Dateisystem bereitstellen. Sie können die Firebase-CLI verwenden, um einen lokalen Server auszuführen.

Falls Sie Firebase Hosting bereits für Ihre App eingerichtet haben, haben Sie möglicherweise schon einige der folgenden Schritte abgeschlossen.

Zum Bereitstellen Ihrer Webanwendung verwenden Sie die Firebase CLI, ein Befehlszeilentool.

  1. Besuchen Sie die Firebase CLI-Dokumentation, um zu erfahren, wie Sie die CLI installieren oder auf die neueste Version aktualisieren.

  2. Initialisiere dein Firebase-Projekt. Führen Sie folgenden Befehl im Stammverzeichnis Ihrer lokalen Anwendung aus:

    firebase init

  3. Starte den lokalen Server für die Entwicklung. Führen Sie folgenden Befehl im Stammverzeichnis Ihrer lokalen Anwendung aus:

    firebase serve

Open-Source-Ressourcen für Firebase JavaScript SDKs

Firebase unterstützt Open-Source-Entwicklung und wir begrüßen Beiträge und Feedback aus der Community.

Firebase JavaScript SDKs

Die meisten Firebase JavaScript SDKs werden als Open-Source-Bibliotheken in unserem öffentlichen Firebase GitHub-Repository entwickelt.

Beispiele für den Schnelleinstieg

Firebase bietet eine Sammlung von Kurzanleitungen für die meisten Firebase-APIs im Web. Sie finden diese Kurzanleitungen in unserem öffentlichen Firebase GitHub-Repository für Kurzanleitungen. Sie können diese Schnellstarts als Beispielcode für die Verwendung von Firebase SDKs verwenden.