Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

Weitere Informationen zu Web und Firebase

Bei der Entwicklung einer Web-App mit Firebase 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. Diese Seite soll diese Fragen beantworten oder Sie auf Ressourcen hinweisen, um mehr zu erfahren.

Wenn Sie Fragen zu einem Thema haben auf dieser Seite nicht abgedeckt, besuchen Sie eine unserer Online - Communities . Wir aktualisieren diese Seite auch regelmäßig mit neuen Themen. Schauen Sie also noch einmal nach, 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. Diese ist die JavaScript - Schnittstelle , die Firebase für mehrere Jahre beibehalten hat und vertraut Web - Entwickler mit bestehenden Anwendungen Firebase. Da Firebase die Unterstützung für diese Version nach einem Hauptversionszyklus entfernt, sollten neue Apps stattdessen Version 9 übernehmen.
  • Modulare Version 9. Dieses SDK stellt einen modularen Ansatz, die SDK Größe und einen höhere Effizienz mit modernen JavaScript Build - Tool wie reduzierte bietet webpack oder Rollup .

Version 9 lässt sich gut in Build-Tools integrieren, die Code entfernen, der in Ihrer App nicht verwendet wird, ein Prozess, der als "Tree-Shaking" bekannt ist. Apps, die mit diesem SDK erstellt wurden, profitieren von stark reduziertem Platzbedarf. Version 8, obwohl als Modul verfügbar, ist nicht strikt 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 Namespace- und Service-Pattern, während Version 9 an diskreten Funktionen orientiert ist. Zum Beispiel, Version 8 Dot-chaining wie firebaseApp.auth() wird in Version 9 durch eine einzige ersetzt getAuth() Funktion, nimmt firebaseApp und gibt eine Authentifizierungsinstanz.

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 bietet Compat-Bibliotheken, um diesen Übergang zu erleichtern. finden Sie in der Upgrade - Anleitung für weitere Details.

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 sowie mehrere Optionen zum Hinzufügen/Installieren der SDKs.

SDKs hinzufügen mit 8.0 (Namespace) 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 Möglichkeiten , den Web - SDKs zu Ihren App hinzufügen und Firebase Web SDK - Varianten weiter unten auf dieser Seite.

Version 9 für neue Apps

Wenn Sie mit Firebase auf eine neue Integration fangen, können Sie in die Version 9 SDK entscheiden , wenn Sie das SDK hinzuzufügen und initialisieren .

Wie Sie Ihre App entwickeln, bedenken Sie, dass Ihr Code in erster Linie um Funktionen organisiert. 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 Führungen für jeden Produktbereich sowie die Version 9 Referenzdokumentation .

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, welche Tools Sie mit Ihrer App verwenden (z. B. einen Modulbundler) oder ob Ihre App in einer Nicht-Browser-Umgebung wie Node.js ausgeführt wird.

Sie können eine der hinzufügen verfügbaren Bibliotheken über eine der unterstützten Methoden , um Ihre Anwendung:

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

Für detaillierte Setup - Anleitungen finden hinzufügen Firebase zu Ihrem JavaScript App . 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 möglicherweise für Nicht-Browser-Anwendungen wie Node.js-Apps, React Native oder Electron benötigt wird. Der Download enthält als Option für einige Pakete Node.js- und React Native-Bundles. Die Node.js-Bundles sind für den Schritt des serverseitigen Renderings (SSR) von SSR-Frameworks erforderlich.

Mit npm mit einem Modul bundler wie webpack oder Rollup bietet Optimierungsmöglichkeiten zu „Baum-Shake“ nicht verwendeten Code und gilt gezielten polyfills, die die Größe Fußabdruck Ihre Anwendung erheblich reduzieren können. Die Implementierung dieser Funktionen kann Ihre Konfiguration und Build-Kette etwas komplexer machen, aber verschiedene gängige CLI-Tools können dazu beitragen, dies zu verringern. Zu diesen Werkzeugen gehören Angular , Reagieren , Vue , Next und andere.

Zusammenfassend:

  • Bietet 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 bekannt sein dürfte. Wenn Sie das CDN zum Hinzufügen der SDKs verwenden, benötigen Sie kein Build-Tool, und Ihre Build-Kette ist im Vergleich zu Modulbundlern möglicherweise einfacher und einfacher zu handhaben. Wenn Ihnen die installierte Größe Ihrer App nicht besonders wichtig ist und Sie keine besonderen Anforderungen wie das Transpilieren von TypeScript haben, könnte CDN eine gute Wahl sein.

Zusammenfassend:

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

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 .

Diese beiden SDK-Varianten wurden entwickelt, um Web-Apps oder Client-Apps für den Endbenutzerzugriff zu erstellen, z. B. in einer Node.js-Desktop- oder IoT-Anwendung. Wenn Ihr Ziel ist es die administrativen Zugriff von privilegierten Umgebungen (zB Server) verwenden , um den zur Einrichtung Firebase Admin SDK statt.

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 verwendet Node.js require Aussagen findet das SDK den Knoten spezifische Bündel. Andernfalls müssen Sie Ihre bundler Einstellungen korrekt das richtige Einstiegspunkt - Feld in Ihrer erkennen rechnete werden package.json Datei (zum Beispiel 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.

Weitere Informationen zum Firebase-Konfigurationsobjekt

Um Firebase in Ihrer App zu initialisieren, müssen Sie die Firebase-Projektkonfiguration Ihrer App bereitstellen. Sie können Ihre Firebase Config - Objekt erhalten , jederzeit.

  • Wir empfehlen nicht manuell Config - Objekt bearbeiten, vor allem 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.

  • Wenn Sie Google Analytics in Ihrer Firebase Projekt freigegeben, die Config - Objekt enthält das Feld measurementId . Weitere Informationen zu diesem Bereich in dem Analytics gestartet Seite bekommen .

Hier ist das Format eines Konfigurationsobjekts mit allen aktivierten Diensten (diese Werte werden automatisch ausgefüllt):

// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

Verfügbare Bibliotheken

Zusätzliche Einrichtungsoptionen

Laden von Firebase SDKs (von CDN) verzögern

Sie können die Aufnahme der Firebase SDKs verzögern, bis die gesamte Seite geladen wurde. Wenn Sie Version 9 CDN - Skripte verwenden , um mit <script type="module"> Dies ist das Standardverhalten. Wenn Sie CDN-Skripts der Version 8 als Modul verwenden, führen Sie diese Schritte aus, um das Laden zu verschieben:

  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.10.0/firebase-app.js"></script>
    
    <script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-firestore.js"></script>
    
    // ...
    
    <script defer src="./init-firebase.js"></script>
    
  2. Erstellen Sie eine init-firebase.js Datei, dann sind die folgenden in der Datei:

    // 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 können über diese App auf zwei gleichwertige Arten auf Firebase zugreifen:

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

Webversion 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. Sie möchten beispielsweise Daten aus der Datenbank eines Firebase-Projekts lesen, Dateien jedoch in einem anderen Firebase-Projekt speichern. Oder Sie möchten 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.

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

Webversion 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 Verwendung Firebase CLI 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 zu lernen , wie man die CLI installieren oder Update auf die neueste Version .

  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 ist als Open - Source - Bibliotheken in unserer öffentlichen entwickelt Firebase GitHub - Repository .

Schnellstart-Beispiele

Firebase verwaltet eine Sammlung von Schnellstartbeispielen für die meisten Firebase-APIs im Web. Finden Sie diese Schnellstarts in unserer öffentlichen Firebase GitHub - Repository quickstart . Sie können diese Schnellstartanleitungen als Beispielcode für die Verwendung von Firebase SDKs verwenden.