Cargue los SDK de Firebase desde URL reservadas

Firebase Hosting reserva las URL de su 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 implementas en Firebase ( firebase deploy ) como cuando ejecutas tu aplicación en un servidor local ( firebase serve ).

Agregar scripts para URL reservadas

Debido a que Firebase Hosting se brinda a través de HTTP/2 cuando se implementa, puedes mejorar el rendimiento cargando archivos desde el mismo origen. Firebase Hosting ofrece la versión 8 del SDK de JavaScript de Firebase desde URL especiales con el formato siguiente:

/__/firebase/JS_SDK_VERSION/FIREBASE_SDK_NAME.js

Recomendamos encarecidamente cargar solo las bibliotecas que utiliza en su aplicación. Por ejemplo, para incluir solo Autenticación y Cloud Firestore, agregue los siguientes scripts al final de su etiqueta <body> , pero antes de usar 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 gestión de múltiples entornos (como desarrollo, ensayo y producción) desde una única base de código. Al confiar en la URL de Hosting reservada, puede 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 para el proyecto de Firebase asociado con el sitio de alojamiento. Esta configuración de Firebase y la inicialización del SDK se proporcionan mediante un script que puedes incluir directamente:

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

Cuando implementas en Firebase o pruebas tu aplicación localmente, este script configura automáticamente el SDK de JavaScript de Firebase para el proyecto activo de Firebase e inicializa el SDK.

Si prefieres controlar la inicialización tú mismo, 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 base de fuego Referencia de la biblioteca (URL reservada)
Núcleo de base de fuego
(requerido)
<script src="/__/firebase/8.10.1/firebase-app.js"></script>
Analítica
<script src="/__/firebase/8.10.1/firebase-analytics.js"></script>
Verificación de aplicaciones
<script src="/__/firebase/8.10.1/firebase-app-check.js"></script>
Autenticación
<script src="/__/firebase/8.10.1/firebase-auth.js"></script>
Tienda de fuego en la nube
<script src="/__/firebase/8.10.1/firebase-firestore.js"></script>
Funciones en la nube para el SDK del cliente Firebase
<script src="/__/firebase/8.10.1/firebase-functions.js"></script>
Instalaciones de base de fuego
<script src="/__/firebase/8.10.1/firebase-installations.js"></script>
Mensajería en la nube
<script src="/__/firebase/8.10.1/firebase-messaging.js"></script>

Para disfrutar de una experiencia óptima al utilizar Cloud Messaging, agregue también el SDK de Firebase para Analytics.

Almacenamiento en la nube
<script src="/__/firebase/8.10.1/firebase-storage.js"></script>
Supervisión del rendimiento
(versión beta )
<script src="/__/firebase/8.10.1/firebase-performance.js"></script>
Base de datos en tiempo real
<script src="/__/firebase/8.10.1/firebase-database.js"></script>
Configuración remota
(versión beta )
<script src="/__/firebase/8.10.1/firebase-remote-config.js"></script>

Para disfrutar de una experiencia óptima al usar Remote Config, agregue también el SDK de Firebase para Analytics.

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

Ayudantes de autenticación

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

Además, esto le permite usar su propio dominio personalizado para la opción authDomain de firebase.initializeApp() . Si configura un dominio personalizado para Firebase Hosting, también puede especificar ese dominio personalizado (en lugar de su subdominio web.app o firebaseapp.com ) al inicializar los SDK de Firebase.

URL reservadas y trabajadores de servicio

Si está creando una aplicación web progresiva (PWA), puede crear un trabajador de servicio que tenga un "retroceso de navegación" y represente una URL específica de forma predeterminada si no coincide con una lista de elementos almacenados en caché.

Si está utilizando la biblioteca sw-precache , puede agregar una configuración de lista blanca alternativa de navegación que excluya el espacio de nombres reservado:

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

En general, recuerde que el espacio de nombres de doble guión está reservado para el uso de Firebase y que no debe interceptar estas solicitudes en su trabajador de servicio.