Firebase für das Web

Wenn Sie eine Webanwendung mit Firebase entwickeln, stoßen Sie möglicherweise auf unbekannte Konzepte oder Bereiche, in denen Sie mehr Informationen benötigen, um die richtigen Entscheidungen für Ihr Projekt zu treffen. Auf dieser Seite möchten wir diese Fragen beantworten oder Sie auf Ressourcen verweisen, in denen Sie weitere Informationen finden.

Wenn Sie Fragen zu einem Thema haben, das auf dieser Seite nicht behandelt wird, besuchen Sie eine unserer Online-Communitys. Außerdem aktualisieren wir diese Seite regelmäßig mit neuen Themen. Schau also immer mal wieder vorbei, um zu sehen, ob wir das Thema hinzugefügt haben, über das du mehr erfahren möchtest.

SDK-Versionen: mit Namensraum und modular

Firebase bietet zwei API-Oberflächen für Web-Apps:

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

Die modulare API lässt sich gut in Build-Tools integrieren, die Code entfernen, der in Ihrer App nicht verwendet wird. Dieser Vorgang wird als „Tree-Shaking“ bezeichnet. Apps, die mit diesem SDK erstellt wurden, profitieren von einer deutlich geringeren Größe. Die API mit Namensraum ist zwar als Modul verfügbar, hat aber keine streng modulare Struktur und bietet nicht den gleichen Grad der Größenreduzierung.

Obwohl der Großteil der modularen API denselben Mustern wie die API mit Namespace folgt, ist die Organisation des Codes anders. Im Allgemeinen ist die API mit Namespace auf ein Namespace- und Dienstmuster ausgerichtet, während die modulare API auf einzelne Funktionen ausgerichtet ist. Beispielsweise wird die Punktverknüpfung der API mit dem Namensbereich, z. B. firebaseApp.auth(), in der modularen API durch eine einzelne getAuth()-Funktion ersetzt, die firebaseApp als Eingabe nimmt und eine Authentication-Instanz zurückgibt.

Das bedeutet, dass Webanwendungen, die mit der API mit Namensbereich erstellt wurden, neu strukturiert werden müssen, um von einem modularen App-Design zu profitieren. Weitere Informationen finden Sie im Leitfaden für Upgrades.

JavaScript – modulare API für neue Apps

Wenn Sie eine neue Integration mit Firebase beginnen, können Sie die modulare API aktivieren, 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 wird. In der modularen API werden Dienste als erstes Argument übergeben. Die Funktion verwendet 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 Anleitungen für die einzelnen Produktbereiche sowie in der Referenzdokumentation zur modularen API.

Möglichkeiten, die Web SDKs Ihrer App hinzuzufügen

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

Sie können Ihrer App eine der verfügbaren Bibliotheken mit einer der unterstützten Methoden hinzufügen:

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

Eine detaillierte Einrichtungsanleitung finden Sie unter Firebase zu Ihrer JavaScript-Anwendung hinzufügen. Im restlichen Teil dieses Abschnitts finden Sie Informationen, die Ihnen bei der Auswahl der verfügbaren Optionen helfen.

npm

Wenn Sie das Firebase-NPM-Paket herunterladen (das sowohl Browser- als auch Node.js-Bundles enthält), erhalten Sie eine lokale Kopie des Firebase SDK. Das kann für Anwendungen erforderlich sein, die nicht im Browser ausgeführt werden, z. B. Node.js-Apps, React Native oder Electron. Der Download enthält für einige Pakete Node.js- und React Native-Bundles als Option. Die Node.js-Bundles sind für den Schritt „Server-Side Rendering“ (SSR) von SSR-Frameworks erforderlich.

Wenn Sie npm mit einem Modul-Bundler wie webpack oder Rollup verwenden, stehen Ihnen Optimierungsoptionen zur Verfügung, mit denen Sie nicht verwendeten Code „tree-shaken“ und gezielte Polyfills anwenden können. So lässt sich die Größe Ihrer App erheblich reduzieren. Die Implementierung dieser Funktionen kann Ihre Konfiguration und Build-Chain etwas komplexer machen, aber verschiedene gängige Befehlszeilentools können dies abmildern. Zu diesen Tools gehören unter anderem Angular, React, Vue und Next.

Zusammenfassung:

  • Bietet eine wertvolle Optimierung der App-Größe
  • Robuste Tools zur Verwaltung von Modulen
  • Erforderlich für SSR mit Node.js

CDN (Content Delivery Network)

Das Hinzufügen von Bibliotheken, die im CDN von Firebase gespeichert sind, ist eine einfache Methode zur SDK-Einrichtung, die vielen Entwicklern vertraut sein dürfte. Wenn Sie die SDKs über das CDN hinzufügen, benötigen Sie kein Build-Tool. Außerdem ist die Build-Kette im Vergleich zu Modul-Bundlern in der Regel einfacher und nutzerfreundlicher. Wenn Sie sich nicht besonders um die Größe der installierten App kümmern und keine speziellen Anforderungen wie das Transpilieren von TypeScript haben, ist ein CDN eine gute Wahl.

Zusammenfassung:

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

Varianten des Firebase Web SDK

Das Web SDK von Firebase kann sowohl in Browser- als auch in Node-Anwendungen verwendet werden. Einige Produkte sind jedoch in Node-Umgebungen nicht verfügbar. Liste der unterstützten Umgebungen

Einige Produkt-SDKs bieten separate Browser- und Node-Varianten, die jeweils sowohl im ESM- als auch im CJS-Format verfügbar sind. Einige Produkt-SDKs bieten sogar Cordova- oder React Native-Varianten. Das Web-SDK ist so konfiguriert, dass die richtige Variante basierend auf Ihrer Tool-Konfiguration oder Umgebung bereitgestellt wird. In den meisten Fällen ist keine manuelle Auswahl erforderlich. Alle SDK-Varianten sind für die Entwicklung von Web- oder Client-Apps für den Endnutzerzugriff konzipiert, z. B. in einer Node.js-Desktop- oder IoT-Anwendung. Wenn Sie Administratorzugriff aus privilegierten Umgebungen (z. B. Servern) einrichten möchten, verwenden Sie stattdessen die Firebase Admin SDK.

Umgebungserkennung mit Bundlern und Frameworks

Wenn Sie das Firebase Web SDK mit npm installieren, 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 in Ihrem Code Node.js-require-Anweisungen verwendet werden, findet das SDK das Node-spezifische Bundle. Andernfalls müssen die Einstellungen Ihres Bundlers richtig konfiguriert sein, damit das richtige Einstiegspunktfeld in Ihrer package.json-Datei erkannt wird (z. B. main, browser oder module). Wenn Laufzeitfehler mit dem SDK auftreten, prüfen Sie, ob Ihr Bundler so konfiguriert ist, dass der richtige Bundle-Typ für Ihre Umgebung priorisiert wird.

Firebase-Konfigurationsobjekt

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

  • Wir empfehlen nicht, 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, können bei Nutzern Ihrer App schwerwiegende Probleme auftreten. Eine Ausnahme bildet die authDomain, die 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. Weitere Informationen zu diesem Feld finden Sie auf der AnalyticsEinstiegsseite.

  • Wenn Sie Google Analytics oder Realtime Database nach dem Erstellen Ihrer Firebase-Web-App aktivieren, müssen Sie das Firebase-Konfigurationsobjekt, das Sie in Ihrer App verwenden, mit den zugehörigen Konfigurationswerten (measurementId bzw. databaseURL) aktualisieren. Sie können Ihr Firebase-Konfigurationsobjekt jederzeit abrufen.

Hier ist das Format eines Konfigurationsobjekts mit allen aktivierten Diensten. Diese Werte werden automatisch ausgefüllt:

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 Einfügen der Firebase SDKs so verzögern, dass es erst nach dem Laden der gesamten Seite erfolgt. Wenn Sie modulare API-CDN-Scripts mit <script type="module"> verwenden, ist dies das Standardverhalten. Wenn Sie CDN-Scripts mit Namespace als Modul verwenden, führen Sie die folgenden Schritte aus, um das Laden zu verschieben:

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

    <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 project configuration
var firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Mehrere Firebase-Projekte in einer einzigen App verwenden

In den meisten Fällen müssen Sie Firebase nur in einer einzigen Standard-App initialisieren. Sie haben dann zwei Möglichkeiten, von dieser App aus auf Firebase zuzugreifen:

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. Beispielsweise möchten Sie Daten aus der Datenbank eines Firebase-Projekts lesen, aber Dateien 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 einzigen App initialisieren und verwenden. Jedes Projekt verwendet dabei eigene 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

Lokalen Webserver für die Entwicklung ausführen

Wenn Sie eine Webanwendung erstellen, erfordern einige Teile des Firebase JavaScript SDK, dass Sie Ihre Webanwendung von einem Server und nicht über das lokale Dateisystem bereitstellen. Sie können die Firebase-Befehlszeile verwenden, um einen lokalen Server auszuführen.

Wenn Sie Firebase Hosting bereits für Ihre App eingerichtet haben, haben Sie möglicherweise einige der folgenden Schritte bereits ausgeführt.

Zum Bereitstellen Ihrer Webanwendung verwenden Sie die Firebase-Befehlszeile.

  1. In der Dokumentation zur Firebase-Befehlszeile erfahren Sie, wie Sie die Befehlszeile installieren oder auf die neueste Version aktualisieren.

  2. Initialisieren Sie Ihr Firebase-Projekt. Führen Sie den folgenden Befehl im Stammverzeichnis Ihres lokalen App-Verzeichnisses aus:

    firebase init

  3. Starten Sie den lokalen Server für die Entwicklung. Führen Sie den folgenden Befehl im Stammverzeichnis Ihres lokalen App-Verzeichnisses aus:

    firebase serve

Open-Source-Ressourcen für Firebase JavaScript SDKs

Firebase unterstützt die Open-Source-Entwicklung und wir freuen uns über Beiträge und Feedback von Nutzern.

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 Beispielen für die meisten Firebase APIs im Web. Sie finden diese Kurzanleitungen in unserem öffentlichen GitHub-Repository für Firebase-Schnellstarts. Sie können diese Schnellstarts als Beispielcode für die Verwendung von Firebase SDKs verwenden.