Laden Sie Firebase SDKs von reservierten URLs

Firebase Hosting reserviert URLs auf Ihrer Website, die mit /__ beginnen. Dieser reservierte Namespace erleichtert die Verwendung anderer Firebase-Produkte zusammen mit Firebase Hosting.

Diese reservierten URLs sind sowohl bei der Bereitstellung auf Firebase ( firebase deploy ) als auch bei der Ausführung Ihrer App auf einem lokalen Server ( firebase serve ) verfügbar.

Skripte für reservierte URLs hinzufügen

Da Firebase Hosting bei der Bereitstellung über HTTP/2 bereitgestellt wird, können Sie die Leistung steigern, indem Sie Dateien vom selben Ursprung laden. Firebase Hosting stellt alle Versionen des Firebase JavaScript SDK von speziellen URLs bereit, die wie folgt formatiert sind:

/__/firebase/JS_SDK_VERSION/FIREBASE_SDK_NAME.js

Wir empfehlen dringend, nur die Bibliotheken zu laden, die Sie in Ihrer App verwenden. Um beispielsweise nur Authentifizierung und Cloud Firestore einzuschließen, fügen Sie die folgenden Skripts am Ende Ihres <body> -Tags hinzu, aber bevor Sie Firebase-Dienste verwenden:

<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. Entwicklung, Staging und Produktion) von einer einzigen Codebasis aus. Indem Sie sich auf die reservierte Hosting-URL verlassen, können Sie denselben Code für mehrere Firebase-Projekte bereitstellen.

Zusätzlich zum Hosten der SDKs selbst bietet der reservierte Namespace auch die gesamte Konfiguration, die zum Initialisieren des SDK für das mit der Hosting-Site verknüpfte Firebase-Projekt erforderlich ist. Diese Firebase-Konfiguration und SDK-Initialisierung wird von einem Skript 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, konfiguriert dieses Skript automatisch das Firebase JavaScript SDK für das aktive Firebase-Projekt und initialisiert das SDK.

Wenn Sie die Initialisierung lieber selbst steuern möchten, sind die Firebase-Konfigurationswerte auch in JSON-Form 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-Kern
(erforderlich)
<script src="/__/firebase/8.10.1/firebase-app.js"></script>
Analytik
<script src="/__/firebase/8.10.1/firebase-analytics.js"></script>
App-Check
<script src="/__/firebase/8.10.1/firebase-app-check.js"></script>
Authentifizierung
<script src="/__/firebase/8.10.1/firebase-auth.js"></script>
Cloud-Firestore
<script src="/__/firebase/8.10.1/firebase-firestore.js"></script>
Cloud-Funktionen für das Firebase-Client-SDK
<script src="/__/firebase/8.10.1/firebase-functions.js"></script>
Cloud-Messaging
<script src="/__/firebase/8.10.1/firebase-messaging.js"></script>

Fügen Sie für ein optimales Erlebnis mit Cloud Messaging auch das Firebase SDK for Analytics hinzu.

Cloud-Speicher
<script src="/__/firebase/8.10.1/firebase-storage.js"></script>
Leistungsüberwachung
( Beta- Version)
<script src="/__/firebase/8.10.1/firebase-performance.js"></script>
Echtzeit-Datenbank
<script src="/__/firebase/8.10.1/firebase-database.js"></script>
Remote-Konfig
( Beta- Version)
<script src="/__/firebase/8.10.1/firebase-remote-config.js"></script>

Fügen Sie für ein optimales Erlebnis mit Remote Config auch das Firebase SDK for Analytics hinzu.

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

Auth-Helfer

Die Firebase-Authentifizierung verwendet den reservierten Namespace, um spezielles JavaScript und HTML bereitzustellen, um die Authentifizierung bei Anbietern über OAuth abzuschließen. Dadurch kann jedes Firebase-Projekt eine eindeutige Firebase-Subdomäne haben, wodurch die Sicherheit der Firebase-Authentifizierung erhöht wird.

Darüber hinaus können Sie Ihre eigene benutzerdefinierte Domäne für die Option authDomain von firebase.initializeApp() verwenden. Wenn Sie eine benutzerdefinierte Domäne für das Firebase-Hosting konfigurieren , können Sie beim Initialisieren der Firebase-SDKs auch diese benutzerdefinierte Domäne (anstelle Ihrer web.app oder firebaseapp.com ) angeben.

Reservierte URLs und Service Worker

Wenn Sie eine Progressive Web App (PWA) erstellen, können Sie einen Service Worker erstellen, der über einen „Navigations-Fallback“ verfügt und standardmäßig eine bestimmte URL rendert, wenn sie nicht mit einer Liste vorab zwischengespeicherter Elemente übereinstimmt.

Wenn Sie die sw-precache- Bibliothek verwenden, können Sie eine Einstellung für die Fallback-Whitelist für die Navigation hinzufügen, die den reservierten Namespace ausschließt:

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

Denken Sie im Allgemeinen daran, dass der Namespace mit doppeltem Unterstrich für die Verwendung von Firebase reserviert ist und dass Sie diese Anforderungen nicht in Ihrem Servicemitarbeiter abfangen sollten.