Carga los SDK de Firebase desde URL reservadas

Firebase Hosting reserva las URLs de tu sitio que comienzan con /__. Este espacio de nombres reservado facilita el uso de otros productos de Firebase junto con Firebase Hosting.

Estas URL reservadas están disponibles tanto cuando realizas una implementación en Firebase (firebase deploy) como cuando ejecutas tu app en un servidor local (firebase serve).

Agrega secuencias de comandos para URL reservadas

Debido a que Firebase Hosting se distribuye a través de HTTP/2 cuando se implementa, puedes cargar archivos desde el mismo origen para aumentar el rendimiento. Firebase Hosting entrega la versión 8 del SDK de Firebase JavaScript desde URLs especiales que tienen el siguiente formato:

/__/firebase/JS_SDK_VERSION/FIREBASE_SDK_NAME.js

Recomendamos que cargues solo las bibliotecas que usas en la app. Por ejemplo, para incluir solo Authentication y Cloud Firestore, agrega las siguientes secuencias de comandos a la parte inferior de la etiqueta <body> antes de utilizar cualquier servicio de 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>

Configuración automática del SDK

La configuración automática del SDK facilita la administración de varios entornos (como los de desarrollo, etapa de pruebas y producción) desde una sola base de código. Como se usa una URL de Hosting reservada, puedes implementar el mismo código en varios proyectos de Firebase.

Además de alojar los SDK en sí, el espacio de nombres reservado también proporciona toda la configuración necesaria para inicializar el SDK del proyecto de Firebase asociado con el sitio de Hosting. Esta configuración de Firebase y esta inicialización del SDK se proporcionan a través de una secuencia de comandos que puedes incluir directamente:

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

Cuando realizas una implementación en Firebase o pruebas tu app de forma local, esta secuencia de comandos configura automáticamente el SDK de FirebaseJavaScript para el proyecto activo de Firebase y, luego, inicializa el SDK.

Si prefieres ocuparte de la inicialización por tu cuenta, los valores de configuración de Firebase también están disponibles en formato JSON:

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

SDK de Firebase JS disponibles (desde URL de Hosting reservadas)

Producto de Firebase Referencias de la biblioteca (URL reservada)
Firebase Core
(obligatorio)
<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>
Instalaciones de Firebase
<script src="/__/firebase/8.10.1/firebase-installations.js"></script>
Cloud Messaging
<script src="/__/firebase/8.10.1/firebase-messaging.js"></script>

Para obtener una experiencia óptima con Cloud Messaging, también agrega el SDK de Firebase para Analytics.

Cloud Storage
<script src="/__/firebase/8.10.1/firebase-storage.js"></script>
Performance Monitoring
(versión 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
(versión beta)
<script src="/__/firebase/8.10.1/firebase-remote-config.js"></script>

Para obtener una experiencia óptima con Remote Config, también agrega el SDK de Firebase para Analytics.

SDK de Firebase JavaScript
(SDK completo)
<script src="/__/firebase/8.10.1/firebase.js"></script>

Auxiliares de Auth

Firebase Authentication usa el espacio de nombres reservado para proporcionar elementos JavaScript y HTML especiales a fin de completar la autenticación con los proveedores mediante OAuth. Esto permite que cada proyecto de Firebase tenga un subdominio único de Firebase, lo que aumenta la seguridad de Firebase Authentication.

Además, te permite usar tu propio dominio personalizado para la opción authDomain de firebase.initializeApp(). Si configuras un dominio personalizado para Firebase Hosting (en lugar de los subdominios web.app o firebaseapp.com), también puedes especificarlo cuando inicialices los SDK de Firebase. Consulta Prácticas recomendadas para usar signInWithRedirect para obtener más información sobre el uso de un dominio personalizado.

URL reservadas y service workers

Si vas a compilar una app web progresiva (AWP), puedes crear un service worker que tenga una opción de resguardo para navegación y presente una URL específica de forma predeterminada si no encuentra coincidencias con una lista de elementos almacenados en caché previamente.

Si usas la biblioteca sw-precache, puedes agregar una lista de opciones de resguardo para navegación permitidas que excluya el espacio de nombres reservado:

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

En general, recuerda que el espacio de nombres con doble guion bajo está reservado para que lo use Firebase y no debes interceptar estas solicitudes con tu service worker.