Catch up on highlights from Firebase at Google I/O 2023. Learn more

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 Version 8 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>
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ü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 Unterdomäne 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.