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) como cuando ejecutas tu app en un servidor local (firebase serve).

Agrega secuencias de comandos para URL reservadas

Debido a que Firebase Hosting se entrega a través de HTTP/2 cuando se implementa, puedes cargar archivos desde el mismo origen para mejorar 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 Firebase JavaScript 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>
Verificación de aplicaciones
<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>
SDK cliente de Cloud Functions para Firebase
<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>

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

Si quieres 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.

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.