Wczytywanie pakietów SDK Firebase z zarezerwowanych adresów URL

Firebase Hosting rezerwuje adresy URL w witrynie zaczynające się od /__. Ta zarezerwowana przestrzeń nazw ułatwia korzystanie z innych usług Firebase w połączeniu z Firebase Hosting.

Zarezerwowane adresy URL są dostępne zarówno podczas wdrażania do Firebase (firebase deploy), jak i w przypadku uruchamiania aplikacji na serwerze lokalnym (firebase serve).

Dodawanie skryptów do zarezerwowanych adresów URL

Ponieważ Firebase Hosting jest udostępniany przez HTTP/2 po wdrożeniu, możesz zwiększyć wydajność, wczytując pliki z tego samego źródła. Firebase Hosting udostępnia wersję 8 pakietu SDK Firebase JavaScript z specjalnych adresów URL o takim formacie:

/__/firebase/JS_SDK_VERSION/FIREBASE_SDK_NAME.js

Zdecydowanie zalecamy wczytywanie tylko tych bibliotek, których używasz w aplikacji. Aby na przykład uwzględnić tylko AuthenticationCloud Firestore, dodaj te skrypty na końcu tagu <body>, ale przed użyciem dowolnej usługi Firebase:

<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>

Automatyczna konfiguracja pakietu SDK

Automatyczna konfiguracja pakietu SDK ułatwia zarządzanie wieloma środowiskami (np. programistycznym, przejściowym i produkcyjnym) z jednego repozytorium kodu. Korzystając z zarezerwowanego adresu URL Hosting, możesz wdrożyć ten sam kod w wielu projektach Firebase.

Oprócz hostowania samych pakietów SDK zarezerwowana przestrzeń nazw zapewnia też całą konfigurację niezbędną do zainicjowania pakietu SDK dla projektu Firebase powiązanego z witryną Hosting. Konfiguracja Firebase i inicjalizacja pakietu SDK są zapewniane przez skrypt, który możesz bezpośrednio uwzględnić:

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

Podczas wdrażania na Firebase lub testowania aplikacji lokalnie ten skrypt automatycznie konfiguruje pakiet SDK Firebase JavaScript dla aktywnego projektu Firebase i inicjalizuje go.

Jeśli wolisz samodzielnie kontrolować inicjowanie, wartości konfiguracji Firebase są też dostępne w formacie JSON:

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

Dostępne pakiety Firebase JS SDK (z zarezerwowanych adresów URL Hosting)

Usługa Firebase Dokumentacja biblioteki (zarezerwowany adres URL)
Firebase Core
(wymagany)
<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 instalacji
<script src="/__/firebase/8.10.1/firebase-installations.js"></script>
Cloud Messaging
<script src="/__/firebase/8.10.1/firebase-messaging.js"></script>

Aby zapewnić sobie optymalne korzystanie z Cloud Messaging, dodaj też pakiet SDK Firebase dla Analytics.

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

Aby zapewnić sobie optymalne korzystanie z Remote Config, dodaj też pakiet SDK Firebase dla Analytics.

Firebase JavaScript SDK
(cały pakiet SDK)
<script src="/__/firebase/8.10.1/firebase.js"></script>

Pomoc dotycząca uwierzytelniania

Firebase Authentication używa zarezerwowanej przestrzeni nazw do udostępniania specjalnego kodu JavaScript i kodu HTML do uwierzytelniania dostawców za pomocą protokołu OAuth. Dzięki temu każdy projekt Firebase może mieć unikalny subdomena Firebase, co zwiększa bezpieczeństwo Firebase Authentication.

Pozwoli Ci to też używać własnej domeny niestandardowej w przypadku opcji authDomain w firebase.initializeApp(). Jeśli skonfigurujesz domenę niestandardową dla Firebase Hosting, możesz ją podać (zamiast subdomeny web.app lub firebaseapp.com) podczas inicjowania pakietów SDK Firebase. Więcej informacji o korzystaniu z domeny niestandardowej znajdziesz w artykule Sprawdzone metody dotyczące wywoływania metody signInWithRedirect.

Zarezerwowane adresy URL i usługi w tle

Jeśli tworzysz progresywną aplikację internetową (PWA), możesz utworzyć skrypt service worker, który ma „zastępczą nawigację” i domyślnie renderuje określony URL, jeśli nie pasuje on do listy elementów wstępnie zapisanych w pamięci podręcznej.

Jeśli używasz biblioteki sw-precache, możesz dodać ustawienie listy dozwolonych adresów domyślnych nawigacji, które wyklucza zarezerwowaną przestrzeń nazw:

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

Pamiętaj, że przestrzeń nazw z podwójnym podkreśleniem jest zarezerwowana dla Firebase i nie należy przechwytywać tych żądań w workerze usługi.