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 in Firebase (firebase deploy) als auch bei der Ausführung der App auf einem lokalen Server (firebase serve) verfügbar.
Scripts 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 aus derselben Quelle laden. Firebase Hosting stellt Version 8 des Firebase JavaScript SDK über spezielle URLs mit folgendem Format bereit:
/__/firebase/JS_SDK_VERSION/FIREBASE_SDK_NAME.js
Wir empfehlen dringend, nur die Bibliotheken zu laden, die Sie in Ihrer App verwenden. Wenn Sie beispielsweise nur Authentication und Cloud Firestore einbinden möchten, fügen Sie die folgenden Skripts am Ende des <body>-Tags ein, 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) über eine einzige Codebasis. Wenn Sie die reservierte Hosting-URL verwenden, können Sie denselben Code in mehreren Firebase-Projekten bereitstellen.
Neben dem Hosting der SDKs selbst bietet der reservierte Namespace auch die gesamte Konfiguration, die zum Initialisieren des SDK für das Firebase-Projekt erforderlich ist, das mit der Hosting-Website verknüpft 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 die App in Firebase bereitstellen oder lokal testen, wird das Firebase JavaScript SDK durch dieses Skript automatisch für das aktive Firebase-Projekt konfiguriert und initialisiert.
Wenn Sie die Initialisierung lieber selbst steuern möchten, sind die Firebase-Konfigurationswerte 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 auch das Firebase SDK für Analytics hinzufügen. |
| Firebase JavaScript SDK (gesamtes SDK) |
<script src="/__/firebase/8.10.1/firebase.js"></script> |
Auth-Helfer
Firebase Authentication verwendet den reservierten Namespace, um spezielles JavaScript und HTML bereitzustellen, damit die Authentifizierung bei Anbietern über OAuth abgeschlossen werden kann. So kann jedes Firebase-Projekt eine eindeutige Firebase-Subdomain haben, was die Sicherheit von Firebase Authentication erhöht.
Außerdem können Sie so Ihre eigene benutzerdefinierte Domain für die authDomain-Option von firebase.initializeApp() verwenden. Wenn Sie eine benutzerdefinierte Domain für Firebase Hosting konfigurieren, können Sie diese benutzerdefinierte Domain (anstelle Ihrer web.app- oder firebaseapp.com-Subdomain) auch beim Initialisieren der Firebase-SDKs angeben. Weitere Informationen zur Verwendung einer benutzerdefinierten Domain finden Sie unter Best Practices für die Verwendung von signInWithRedirect.
Reservierte URLs und Service Worker
Wenn Sie eine progressive Web-App (PWA) entwickeln, können Sie einen Service Worker mit einem „Navigation-Fallback“ erstellen, der standardmäßig eine bestimmte URL rendert, wenn sie nicht mit einer Liste vorab im Cache gespeicherter Elemente übereinstimmt.
Wenn Sie die sw-precache-Bibliothek verwenden, können Sie eine Whitelist-Einstellung für den Navigations-Fallback hinzufügen, die den reservierten Namespace ausschließt:
{
navigateFallbackWhitelist: [/^(?!\/__).*/]
}
Im Allgemeinen gilt, dass der Namespace mit zwei Unterstrichen für die Firebase-Nutzung reserviert ist und Sie diese Anfragen nicht in Ihrem Service Worker abfangen sollten.