Firebase SDKs aus reservierten URLs laden

Firebase Hosting reserviert URLs auf Ihrer Website, die mit /__ beginnen. Mit diesem reservierten Namespace können Sie andere Firebase-Produkte einfacher mit Firebase Hosting verwenden.

Diese reservierten URLs sind sowohl bei der Bereitstellung in Firebase verfügbar (firebase deploy) oder wenn du deine App auf einem lokalen Server ausführst (firebase serve).

Skripts für reservierte URLs hinzufügen

Da Firebase Hosting bei der Bereitstellung über HTTP/2 bereitgestellt wird, können Sie indem Sie Dateien vom gleichen Ursprungsserver laden. Firebase Hosting Portierungen Version 8 des Firebase JavaScript SDK von speziellen URLs gesendet werden, die wie folgt formatiert sind:

/__/firebase/JS_SDK_VERSION/FIREBASE_SDK_NAME.js

Wir empfehlen dringend, nur die Bibliotheken zu laden, die die Sie in Ihrer App verwenden. Um beispielsweise nur Authentication und Cloud Firestore, fügen Sie unten auf Ihrem <body> die folgenden Skripts hinzu Bevor Sie Firebase-Dienste nutzen:

<body>
  <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
  <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
  <script src="/__/firebase/8.10.1/firebase-app.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="/__/firebase/8.10.1/firebase-auth.js"></script>
  <script src="/__/firebase/8.10.1/firebase-firestore.js"></script>
</body>

Automatische SDK-Konfiguration

Die automatische SDK-Konfiguration erleichtert die Verwaltung mehrerer Umgebungen (z. B. wie Entwicklung, Staging und Produktion) über eine einzige Codebasis. Wenn Sie sich auf die reservierte Hosting-URL verwendet, können Sie denselben Code für mehrere Firebase-Apps bereitstellen. Projekten.

Neben dem Hosting der SDKs selbst bietet der reservierte Namespace auch alle Konfigurationen, die zum Initialisieren des SDK für Firebase erforderlich sind, Projekt, das mit der Hosting-Website verknüpft ist. Diese Firebase-Konfiguration und SDK-Initialisierung werden über ein Script bereitgestellt, das Sie direkt einbinden können:

<!-- Load the Firebase SDKs before loading this file -->
<script src="/__/firebase/init.js"></script>

Wenn Sie Ihre App in Firebase bereitstellen oder lokal testen, wird dieses Skript automatisch konfiguriert das Firebase JavaScript SDK für die aktives Firebase-Projekt und initialisiert das SDK.

Wenn Sie die Initialisierung lieber selbst steuern möchten, können Sie die Firebase-Konfiguration -Werte sind auch im JSON-Format verfügbar:

fetch('/__/firebase/init.json').then(async response => {
  firebase.initializeApp(await response.json());
});

Verfügbare Firebase JS SDKs (von reservierten Hosting URLs)

Firebase-Produkt Bibliotheksreferenz (reservierte URL)
Firebase Core
(erforderlich)
<script src="/__/firebase/8.10.1/firebase-app.js"></script>
Analytics
<script src="/__/firebase/8.10.1/firebase-analytics.js"></script>
App Check
<script src="/__/firebase/8.10.1/firebase-app-check.js"></script>
Authentication
<script src="/__/firebase/8.10.1/firebase-auth.js"></script>
Cloud Firestore
<script src="/__/firebase/8.10.1/firebase-firestore.js"></script>
Cloud Functions for Firebase Client SDK
<script src="/__/firebase/8.10.1/firebase-functions.js"></script>
Firebase Installationen
<script src="/__/firebase/8.10.1/firebase-installations.js"></script>
Cloud Messaging
<script src="/__/firebase/8.10.1/firebase-messaging.js"></script>

Für eine optimale Nutzung von Cloud Messaging sollten Sie auch das Firebase SDK für Analytics hinzufügen.

Cloud Storage
<script src="/__/firebase/8.10.1/firebase-storage.js"></script>
Performance Monitoring
(Beta-Version)
<script src="/__/firebase/8.10.1/firebase-performance.js"></script>
Realtime Database
<script src="/__/firebase/8.10.1/firebase-database.js"></script>
Remote Config
(Beta-Version)
<script src="/__/firebase/8.10.1/firebase-remote-config.js"></script>

Für eine optimale Nutzung von Remote Config sollten Sie außerdem das Firebase SDK für Analytics hinzufügen.

Firebase JavaScript SDK
(gesamtes SDK)
<script src="/__/firebase/8.10.1/firebase.js"></script>

Auth-Hilfe

Firebase Authentication verwendet den reservierten -Namespace, um speziellen JavaScript- und HTML-Code bereitzustellen, um die Authentifizierung mit über OAuth. So kann jedes Firebase-Projekt einen eindeutigen Firebase-Subdomain, wodurch die Sicherheit von Firebase Authentication erhöht wird.

Außerdem können Sie Ihre eigene benutzerdefinierte Domain für die authDomain-Option von firebase.initializeApp() verwenden. Wenn Sie Benutzerdefinierte Domain konfigurieren für Firebase Hosting möchten, können Sie auch diese benutzerdefinierte Domain angeben (statt Ihrer web.app- oder firebaseapp.com-Subdomain) bei der Initialisierung von Firebase SDKs. Weitere Informationen finden Sie unter Best Practices für die Verwendung von „signInWithWeiterleitung“ finden Sie weitere Informationen zur Verwendung einer benutzerdefinierten Domain.

Reservierte URLs und Service Worker

Wenn Sie eine progressive Web-App (PWA) entwickeln, könnten Sie einen Dienst erstellen, Worker mit einem „Navigations-Fallback“ und rendert standardmäßig eine bestimmte URL, wenn sie nicht mit einer Liste vorab im Cache gespeicherter Elemente übereinstimmt.

Bei Verwendung von sw-precache können Sie eine Navigations-Fallback-Einstellung auf die Zulassungsliste setzen, Reservierter Namespace:

{
  navigateFallbackWhitelist: [/^(?!\/__).*/]
}

Denken Sie im Allgemeinen daran, dass der Namespace mit zwei Unterstrichen für die Firebase-Nutzung reserviert ist und dass Sie diese Anfragen nicht in Ihrem Dienstarbeiter abfangen sollten.