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.

Te zarezerwowane adresy URL są dostępne po wdrożeniu aplikacji w Firebase (firebase deploy) lub po uruchomieniu aplikacji na serwerze lokalnym (firebase serve).

Dodawanie skryptów dla 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 wdrażać ten sam kod w kilku projektach Firebase.

Zarezerwowana przestrzeń nazw zawiera nie tylko pakiety SDK, ale też całą konfigurację potrzebną 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 Odwołania do biblioteki (zarezerwowany 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, aby udostępniać specjalny kod JavaScript i HTML do uwierzytelniania u dostawców za pomocą 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 „awaryjny sposób nawigacji” i domyślnie renderuje określony adres URL, jeśli nie pasuje do listy elementów z 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: [/^(?!\/__).*/]
}

Ogólnie pamiętaj, że przestrzeń nazw z podwójnym podkreśleniem jest zarezerwowana do użycia w Firebase i że nie należy przechwytywać tych żądań przez mechanizm Service Worker.