Google 致力于为黑人社区推动种族平等。查看具体举措

Erfahren Sie mehr über Web und Firebase

Beim Entwickeln einer Web-App mit Firebase 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-Communities . Wir werden diese Seite auch regelmäßig mit neuen Themen aktualisieren, schauen Sie also immer wieder vorbei, um zu sehen, 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:

  • Version 8. Dies ist die JavaScript-Schnittstelle, die Firebase seit mehreren Jahren pflegt und Webentwicklern mit bestehenden Firebase-Apps vertraut ist. Da Firebase die Unterstützung für diese Version nach einem großen Veröffentlichungszyklus entfernt, sollten neue Apps stattdessen Version 9 übernehmen.
  • Modulare Ausführung 9 . Dieses SDK führt einen modularen Ansatz ein, der eine reduzierte SDK-Größe und mehr Effizienz mit modernen JavaScript-Build-Tools wie Webpack oder Rollup bietet.

Version 9 lässt sich gut in Build-Tools integrieren, die Code entfernen, der nicht in Ihrer App verwendet wird, ein Prozess, der als „Tree-Shaking“ bekannt ist. Apps, die mit diesem SDK erstellt wurden, profitieren von stark reduziertem Platzbedarf. Obwohl Version 8 als Modul verfügbar ist, ist sie 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 anders. Generell orientiert sich Version 8 an einem Namensraum- und Dienstmuster, während Version 9 an diskreten Funktionen orientiert ist. Beispielsweise wird die Punktverkettung von Version 8 wie firebaseApp.auth( firebaseApp.auth() in Version 9 durch eine einzelne getAuth() Funktion ersetzt, die firebaseApp nimmt und eine Authentifizierungsinstanz zurückgibt.

Das 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 stellt Kompatibilitätsbibliotheken bereit, um diesen Übergang zu erleichtern; Weitere Einzelheiten finden Sie in der Upgrade-Anleitung .

Was wird unterstützt?

Obwohl Version 8 und Version 9 unterschiedliche Codestile haben, bieten sie eine sehr ähnliche Unterstützung für Firebase-Funktionen und -Optionen. Wie wir in diesem Handbuch ausführlich beschreiben werden, unterstützen beide SDK-Versionen JavaScript- und Node.js-Varianten zusammen mit mehreren Optionen zum Hinzufügen/Installieren der SDKs.

SDKs hinzufügen mit 8.0 (Namensraum) 9.0 (modular)
npm
  • Für JavaScript
  • Für Node.js
  • Für JavaScript
  • Für Node.js
CDN (Content Delivery Network)
  • Für JavaScript
  • Für JavaScript
Hosting-URLs
  • Für JavaScript
  • Für Node.js

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

Version 9 für neue Apps

Wenn Sie mit einer neuen Integration mit Firebase beginnen, können Sie sich für Version 9 des SDK 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 wird. In Version 9 werden Dienste als erstes Argument übergeben, und die Funktion verwendet dann die Details des Dienstes, um den Rest zu erledigen. Zum 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 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 Firebase-SDKs zu Ihrer Web-App hinzufügen, hängt davon ab, welche Tools Sie mit Ihrer App verwenden (z. B. einen Modul-Bundler) oder ob Ihre App in einer Nicht-Browser-Umgebung wie Node.js ausgeführt wird.

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

  • npm (für Modulbündel und Node.js)
  • CDN (Content Delivery Network)

Ausführliche Einrichtungsanweisungen finden Sie unter Hinzufügen von Firebase zu Ihrer JavaScript-App . Der Rest dieses Abschnitts enthält Informationen, die Ihnen bei der Auswahl aus den verfügbaren Optionen helfen sollen.

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, das möglicherweise für Nicht-Browser-Anwendungen wie Node.js-Apps, React Native oder Electron benötigt wird. 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.

Die Verwendung von npm mit einem Modul-Bundler wie Webpack oder Rollup bietet Optimierungsoptionen, um ungenutzten Code zu „strukturieren“ und gezielte Polyfills anzuwenden, wodurch der Platzbedarf Ihrer App erheblich reduziert werden kann. Die Implementierung dieser Funktionen kann Ihre Konfiguration und Build-Kette etwas komplexer machen, aber verschiedene Mainstream-CLI-Tools können dazu beitragen, dies zu verringern. Zu diesen Tools gehören Angular , React , Vue , Next und andere.

Zusammenfassend:

  • Bietet eine wertvolle Optimierung der App-Größe
  • Zur Verwaltung von Modulen stehen robuste Tools zur Verfügung
  • 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 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 Modul-Bundlern möglicherweise einfacher und einfacher zu handhaben. Wenn Sie sich nicht besonders um die installierte Größe Ihrer App sorgen und keine besonderen Anforderungen wie das Transpilieren aus TypeScript haben, könnte CDN eine gute Wahl sein.

Zusammenfassend:

  • 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

Derzeit stellt Firebase zwei Web-SDK-Varianten bereit:

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

Beide SDK-Varianten wurden entwickelt, um beim Erstellen von Web-Apps oder Client-Apps für den Endbenutzerzugriff zu helfen, z. B. in einer Node.js-Desktop- oder IoT-Anwendung. Wenn Sie den Administratorzugriff von privilegierten Umgebungen (z. B. Servern) 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 Node.js require -Anweisungen verwendet, findet das SDK das knotenspezifische Bundle. Andernfalls müssen die Einstellungen Ihres Bundlers korrekt berechnet werden, um das richtige Einstiegspunktfeld in Ihrer Datei package.json zu erkennen (z. B. main , browser oder module ). Wenn 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

Um Firebase in Ihrer App zu initialisieren, müssen Sie die Firebase-Projektkonfiguration Ihrer App bereitstellen. Sie können Ihr Firebase-Konfigurationsobjekt jederzeit abrufen.

  • Wir empfehlen, Ihr Konfigurationsobjekt nicht 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 Benutzern Ihrer App ernsthafte Probleme auftreten.

  • 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 Seite „Analytics – Erste Schritte“ .

  • Wenn Sie Google Analytics oder Realtime Database aktivieren, nachdem Sie Ihre Firebase-Web-App erstellt haben, stellen Sie sicher, dass das Firebase-Konfigurationsobjekt, das Sie in Ihrer App verwenden, mit den zugehörigen Konfigurationswerten ( measurementId bzw. databaseURL ) aktualisiert wird. 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",
  storageBucket: "PROJECT_ID.appspot.com",
  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 Setup-Optionen

Laden von Firebase SDKs verzögern (vom CDN)

Sie können die Aufnahme der Firebase SDKs verzögern, bis die gesamte Seite geladen wurde. Wenn Sie CDN-Skripts der Version 9 mit <script type="module"> , ist dies das Standardverhalten. Wenn Sie CDN-Skripts der Version 8 als Modul verwenden, führen Sie diese 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 mithilfe eines zweiten Skripts, zum Beispiel:

    <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 dann 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 einzelnen Standard-App initialisieren. Sie können von dieser App aus auf zwei gleichwertige Arten auf Firebase zugreifen:

Web version 9

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

Web version 8

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

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 vielleicht 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, wobei jedes Projekt seine eigenen Firebase-Konfigurationsinformationen verwendet.

Web version 9

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

Web version 8

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

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

Wenn Sie eine Web-App erstellen, erfordern einige Teile des Firebase JavaScript SDK, dass Sie Ihre Web-App von einem Server 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 mehrere der folgenden Schritte ausgeführt.

Um Ihre Web-App bereitzustellen, 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. 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.

Schnellstart-Beispiele

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.