Firebase SDKs von reservierten URLs laden

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

Diese reservierten URLs sind sowohl , wenn Sie Firebase (deploy firebase deploy ) , oder wenn Sie Ihre Anwendung auf einem lokalen Server ausgeführt werden ( firebase serve ).

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 gleichen 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 Laden stark nur die Bibliotheken , die Sie in Ihrer Anwendung verwenden. Zum Beispiel, um nur Authentifizierung und Cloud - Firestor enthalten, fügen Sie die folgenden Skripte zu der Unterseite des <body> -Tag, aber 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.8.0/firebase-app.js"></script>

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

Automatische SDK-Konfiguration

Die automatische SDK-Konfiguration macht es einfach, mehrere Umgebungen (wie Entwicklung, Staging und Produktion) von einer einzigen Codebasis aus zu verwalten. Indem Sie sich auf die reservierte Hosting-URL verlassen, können Sie denselben Code in mehreren Firebase-Projekten bereitstellen.

Neben dem 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 einfügen können:

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

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

Wenn Sie die Initialisierung lieber selbst steuern möchten, stehen die Firebase-Konfigurationswerte auch im JSON-Format zur Verfügung:

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.8.0/firebase-app.js"></script>
Analytik
<script src="/__/firebase/8.8.0/firebase-analytics.js"></script>
Authentifizierung
<script src="/__/firebase/8.8.0/firebase-auth.js"></script>
Cloud Firestore
<script src="/__/firebase/8.8.0/firebase-firestore.js"></script>
Cloud Functions for Firebase Client SDK
<script src="/__/firebase/8.8.0/firebase-functions.js"></script>
Cloud-Messaging
<script src="/__/firebase/8.8.0/firebase-messaging.js"></script>

Für eine optimale Nutzung von Cloud Messaging fügen Sie außerdem das Firebase SDK for Analytics hinzu.

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

Für eine optimale Erfahrung mit Remote Config fügen Sie außerdem das Firebase SDK for Analytics hinzu.

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

Auth-Helfer

Firebase - Authentifizierung verwendet den reservierten Namespace speziellen JavaScript und HTML , um eine vollständige Authentifizierung mit Anbietern über OAuth zur Verfügung zu stellen. Dadurch kann jedes Firebase-Projekt über eine eindeutige Firebase-Subdomain verfügen, wodurch die Sicherheit der Firebase-Authentifizierung erhöht wird.

Darüber hinaus können Sie so Ihre eigene Domain für die verwenden authDomain Option von firebase.initializeApp() . Wenn Sie eine benutzerdefinierte Domain konfigurieren für Firebase Hosting, dann können Sie auch , dass benutzerdefinierte Domäne angeben (anstelle Ihrer web.app oder firebaseapp.com Sub - Domain) , wenn die Firebase SDKs initialisiert.

Reservierte URLs und Servicemitarbeiter

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

Wenn Sie die verwenden sw-precache Bibliothek können Sie ein Navigationsausweich hinzufügen , dass die weiße Liste umfasst nicht den reservierten Namensraum festlegen:

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

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