Ir a la consola

Carga los SDK de Firebase desde URL reservadas

Firebase Hosting reserva las URL 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) o 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 aumentar el rendimiento cargando archivos desde el mismo origen. Firebase Hosting entrega todas las versiones del SDK de Firebase JavaScript desde URL especiales que tienen el siguiente formato:

/__/firebase/js-sdk-version/firebase-sdk-name.js

Recomendamos que cargues solo las bibliotecas que utilizas en tu 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 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/6.4.0/firebase-app.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="/__/firebase/6.4.0/firebase-auth.js"></script>
  <script src="/__/firebase/6.4.0/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 proporciona 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 Firebase JavaScript para el proyecto activo de Firebase y, luego, inicializa el SDK.

Si prefieres controlar la inicialización personalmente, 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());
});

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, esto te permite usar tu propio dominio personalizado para la opción authDomain de firebase.initializeApp(). Si configuras un dominio personalizado para Firebase Hosting, también puedes especificarlo (en lugar de los subdominios web.app o firebaseapp.com) cuando inicialices los SDK de Firebase.

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 navegación como resguardo y procese una URL específica de forma predeterminada si no coincide con una lista de elementos almacenados en caché previamente.

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

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

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