Save the date - Google I/O returns May 18-20. Register to get the most out of the digital experience: Build your schedule, reserve space, participate in Q&As, earn Google Developer profile badges, and more. Register now

Erfahren Sie mehr über Web und Firebase

Während Sie eine Web-App mit Firebase entwickeln, stoßen Sie möglicherweise auf unbekannte Konzepte oder Bereiche, in denen Sie weitere Informationen benötigen, um die richtigen Entscheidungen für Ihr Projekt zu treffen. Diese Seite soll diese Fragen beantworten oder Sie auf Ressourcen verweisen, um mehr zu erfahren.

Wenn Sie Fragen zu einem Thema haben, das auf dieser Seite nicht behandelt wird, besuchen Sie eine unserer Online-Communitys . Wir werden diese Seite auch regelmäßig mit neuen Themen aktualisieren. Überprüfen Sie daher erneut, ob wir das Thema hinzugefügt haben, über das Sie mehr erfahren möchten.

SDK-Versionen 8 und 9

Firebase bietet zwei SDK-Versionen für Web-Apps, von denen sich eine derzeit in der Beta befindet:

  • Version 8. Dies ist die JavaScript-Oberfläche, die Firebase seit mehreren Jahren verwaltet und Webentwicklern mit vorhandenen Firebase-Apps vertraut ist.
  • Modulare Version 9 (Beta) . Dieses SDK führt einen modularen Ansatz ein, der mit modernen JavaScript-Build-Tools wie Webpack oder Rollup eine geringere SDK-Größe und eine höhere Effizienz bietet.

Version 9 lässt sich gut in Build-Tools integrieren, mit denen Code entfernt wird, der nicht in Ihrer App verwendet wird. Dieser Vorgang wird als "Baumschütteln" bezeichnet. Mit diesem SDK erstellte Apps profitieren von stark reduzierten Footprints. Version 8 ist zwar als Modul erhältlich, jedoch nicht streng modular aufgebaut und bietet nicht den gleichen Grad an Größenreduzierung.

Obwohl der Großteil des SDK der Version 9 denselben Mustern wie Version 8 folgt, ist die Organisation des Codes unterschiedlich. Im Allgemeinen ist Version 8 auf einen Namespace und ein Dienstmuster ausgerichtet, während Version 9 auf diskrete Funktionen ausgerichtet ist. Beispielsweise wird die getAuth() von Version 8, wie z. B. firebaseApp.auth() , in Version 9 durch eine einzelne Funktion getAuth() , die firebaseApp und eine Authentifizierungsinstanz zurückgibt.

Dies bedeutet, dass Web-Apps, die mit Version 8 oder früher erstellt wurden, ein Refactoring erfordern, um den modularen Ansatz von Version 9 nutzen zu können. Firebase bietet kompatible Bibliotheken, um diesen Übergang zu erleichtern. Weitere Informationen finden Sie im Upgrade-Handbuch .

Was wird unterstützt?

Version 8 und Version 9 (Beta) haben zwar unterschiedliche Codestile, bieten jedoch eine sehr ähnliche Unterstützung für Firebase-Funktionen und -Optionen. Wie in diesem Handbuch ausführlich beschrieben, unterstützen beide SDK-Versionen JavaScript- und Node.js-Varianten sowie verschiedene Optionen zum Hinzufügen / Installieren der SDKs.

Fügen Sie SDKs mit hinzu 8.0 (Namespaced) 9.0 (Modular Beta)
npm
  • Für JavaScript
  • Für Node.js.
  • Für JavaScript
  • Für Node.js.
CDN (Content Delivery Network)
  • Für JavaScript
  • In Kürze für JavaScript
Hosting-URLs
  • Für JavaScript
  • Für Node.js.
  • In Kürze für JavaScript und Node.js verfügbar

Weitere Informationen finden Sie unter Möglichkeiten zum Hinzufügen der Web-SDKs zu Ihrer App und den Firebase-Web-SDK-Varianten weiter unten auf dieser Seite.

Version 9 für neue Apps

Wenn Sie mit einer neuen Integration in Firebase beginnen, können Sie sich beim Hinzufügen und Initialisieren des SDK für das Beta-SDK der Version 9 entscheiden.

Beachten Sie bei der Entwicklung Ihrer App, dass Ihr Code hauptsächlich nach Funktionen organisiert ist . In Version 9 werden Dienste als erstes Argument übergeben, und die Funktion verwendet dann die Details des Dienstes, um den Rest zu erledigen. Beispielsweise:

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 Handbüchern für jeden Produktbereich sowie in der Referenzdokumentation zu Version 9 .

Möglichkeiten zum Hinzufügen der Web-SDKs zu Ihrer App

Firebase bietet JavaScript-Bibliotheken für die meisten Firebase-Produkte, einschließlich Remote Config, FCM und mehr. Wie Sie Ihrer Web-App Firebase-SDKs hinzufügen, hängt davon ab, ob Sie Firebase-Hosting für Ihre App verwenden, welche Tools Sie mit Ihrer App verwenden (z. B. einen Modulbündler) oder ob Ihre App in einem Nicht-Browser ausgeführt wird Umgebung wie Node.js.

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

  • npm (für Modulbündler und Node.js)
  • CDN (Content Delivery Network)
  • Firebase-Hosting-URLs

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

npm

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

Die Verwendung von npm mit einem Modulbündler wie Webpack oder Rollup bietet Optimierungsoptionen, um nicht verwendeten Code zu " baumschütteln " und gezielte Polyfills anzuwenden, wodurch der Platzbedarf Ihrer App erheblich reduziert werden kann. Das Implementieren dieser Funktionen kann Ihre Konfiguration und Build-Kette etwas komplexer machen, aber verschiedene gängige CLI-Tools können dazu beitragen, dies zu verringern. Diese Tools umfassen Angular , React , Vue , Next und andere.

Zusammenfassend:

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

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 möglicherweise vertraut ist. Wenn Sie das CDN zum Hinzufügen der SDKs verwenden, benötigen Sie kein Build-Tool, und Ihre Build-Kette ist im Vergleich zu Modulbündlern möglicherweise einfacher und einfacher zu bearbeiten. Wenn Sie sich nicht besonders Gedanken über die installierte Größe Ihrer App machen und keine besonderen Anforderungen wie das Transpilieren von TypeScript haben, ist CDN möglicherweise eine gute Wahl.

Zusammenfassend:

  • Bekannt und einfach
  • Geeignet, wenn die App-Größe kein großes Problem darstellt
  • Geeignet, wenn Ihre Website keine Build-Tools verwendet.

Hosting-URLs

Firebase Hosting bietet reservierte URLs, mit denen Sie die Leistung verbessern können, indem Sie Dateien desselben Ursprungs laden. Wenn Sie Firebase Hosting bereits in Ihrer App verwenden oder verwenden möchten, können Sie JavaScript-SDKs über Hosting-URLs hinzufügen und von diesem Leistungsgewinn profitieren. Darüber hinaus unterstützt diese Methode die automatische Initialisierung des SDK, wodurch die Verwaltung mehrerer Umgebungen wie Entwicklung, Bereitstellung und Produktion vereinfacht werden kann. Weitere Informationen zum Hinzufügen von SDKs über reservierte Hosting-URLs .

Zusammenfassend:

  • Bietet einen leichten Leistungsvorteil gegenüber CDN
  • Kann das Arbeiten in mehreren Entwicklungsumgebungen vereinfachen
  • Praktisch für Apps, die bereits Firebase Hosting verwenden

Firebase Web SDK-Varianten

Derzeit bietet Firebase zwei Web SDK-Varianten:

  • Ein JavaScript-Bundle, das alle Firebase-Funktionen zur Verwendung im Browser unterstützt.
  • Ein clientseitiges Node.js-Bundle, das viele - aber nicht alle - Firebase-Funktionen unterstützt. Siehe die Liste der unterstützten Umgebungen .

Beide SDK-Varianten dienen zum Erstellen von Web-Apps oder Client-Apps für den Endbenutzerzugriff, z. B. in einer Node.js-Desktop- oder IoT-Anwendung. Wenn Sie den Administratorzugriff von privilegierten Umgebungen (z. B. Servern) aus einrichten möchten, verwenden Sie stattdessen das 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 Ihr Code die require Anweisungen von Node.js verwendet, findet das SDK das knotenspezifische Bundle. Andernfalls müssen die Einstellungen Ihres package.json korrekt dargestellt werden, um das richtige Einstiegspunktfeld in Ihrer package.json Datei (z. B. main , browser oder module ) zu erkennen. Wenn beim SDK Laufzeitfehler auftreten, stellen Sie sicher, dass Ihr Bundler so konfiguriert ist, dass der richtige Bundle-Typ für Ihre Umgebung priorisiert wird.

Verfügbare Bibliotheken

Zusätzliche Setup-Optionen

Verzögertes Laden von Firebase-SDKs (von CDN)

Sie können die Aufnahme der Firebase-SDKs verzögern, bis die gesamte Seite geladen ist.

  1. Fügen Sie ein defer Flagge zu jedem script - Tag für die Firebase SDKs, dann verschieben die Initialisierung von Firebase ein zweites Skript, zum Beispiel:

    <script defer src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
    
    <script defer src="https://www.gstatic.com/firebasejs/8.6.1/firebase-auth.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/8.6.1/firebase-firestore.js"></script>
    
    // ...
    
    <script defer src="./init-firebase.js"></script>
    
  2. Erstellen Sie eine Datei init-firebase.js Folgendes in die Datei ein:

    // TODO: Replace the following with your app's Firebase project configuration
    var firebaseConfig = {
      // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    

Verwenden Sie mehrere Firebase-Projekte in einer einzigen App

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

// Initialize Firebase with a "default" Firebase project
var defaultProject = firebase.initializeApp(firebaseConfig);

console.log(defaultProject.name);  // "[DEFAULT]"

// Option 1: Access Firebase services via the defaultProject variable
var defaultStorage = defaultProject.storage();
var defaultFirestore = defaultProject.firestore();

// Option 2: Access Firebase services using shorthand notation
defaultStorage = firebase.storage();
defaultFirestore = firebase.firestore();

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

Mit dem Firebase JavaScript SDK können Sie mehrere Firebase-Projekte gleichzeitig in einer einzigen App initialisieren und verwenden, wobei jedes Projekt seine eigenen Firebase-Konfigurationsinformationen verwendet.

// Initialize Firebase with a default Firebase project
firebase.initializeApp(firebaseConfig);

// Initialize Firebase with a second Firebase project
var 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
var defaultStorage = firebase.storage();
var defaultFirestore = firebase.firestore();

// Use the otherProject variable to access the second project's Firebase services
var otherStorage = otherProject.storage();
var otherFirestore = otherProject.firestore();

Führen Sie einen lokalen Webserver für die Entwicklung aus

Wenn Sie eine Web-App erstellen, müssen Sie für einige Teile des Firebase JavaScript SDK Ihre Web-App von einem Server aus und nicht vom lokalen Dateisystem aus bereitstellen. Sie können die Firebase-CLI verwenden , um einen lokalen Server auszuführen.

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

Um Ihre Web-App bereitzustellen, verwenden Sie die Firebase-CLI, ein Befehlszeilentool.

  1. In der Firebase CLI-Dokumentation erfahren Sie, wie Sie die CLI 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 ermutigen Community-Beiträge und Feedback.

Firebase JavaScript SDKs

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

Schnellstartbeispiele

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