Más información sobre la Web y Firebase

A medida que desarrollas una app web con Firebase, puedes encontrar conceptos desconocidos o áreas en las que necesitas más información para tomar las decisiones correctas para tu proyecto. Esta página tiene como objetivo responder esas preguntas o dirigirte a recursos para obtener más información.

Si tienes preguntas sobre un tema que no se aborda en esta página, visita una de nuestras comunidades en línea. Además, actualizaremos esta página con temas nuevos de forma periódica. Vuelve a consultarla para ver si agregamos el tema sobre el que deseas aprender.

SDK de versión 8 y versión 9

Firebase proporciona dos versiones del SDK para apps web:

  • Versión 8. Esta es la interfaz de JavaScript que Firebase mantiene hace varios años y con la que están familiarizados los desarrolladores web que tienen apps de Firebase existentes. Debido a que Firebase quitará la compatibilidad con esta versión después de un ciclo de lanzamiento importante, las apps nuevas deberán adoptar la versión 9.
  • Versión modular 9. Este SDK tiene un enfoque modular que proporciona un tamaño de SDK reducido y mayor eficiencia con herramientas modernas de compilación de JavaScript como webpack o Rollup.

La versión 9 se integra bien en las herramientas de compilación que quitan el código no utilizado en tu app, un proceso conocido como “eliminación de código no utilizado”. Las apps que se compilan con este SDK se benefician del tamaño reducido. La versión 8, aunque está disponible como módulo, no tiene una estructura estrictamente modular ni proporciona el mismo nivel de reducción de tamaño.

Aunque la mayoría de SDK de versión 9 sigue los mismos patrones que la versión 8, la organización del código es diferente. En general, la versión 8 está segmentada a un patrón de espacios de nombres y servicios, mientras que la versión 9 está segmentada a funciones discretas. Por ejemplo, el encadenamiento de métodos de la versión 8, como firebaseApp.auth(), se reemplaza en la versión 9 por una sola función getAuth() que admite firebaseApp y muestra una instancia de autenticación.

Esto significa que las apps web creadas con la versión 8 o versiones anteriores deben refactorizarse para aprovechar el enfoque modular de la versión 9. Firebase proporciona bibliotecas compatibles para facilitar esa transición. Consulta la guía de actualización para obtener más detalles.

¿Con qué son compatibles?

Si bien la versión 8 y la 9 tienen diferentes estilos de código, proporcionan una compatibilidad muy similar con las características y opciones de Firebase. Como se describirá en detalle en esta guía, ambas versiones del SDK son compatibles con variantes de JavaScript y Node.js, además de varias opciones para agregar o instalar los SDK.

Agrega los SDK con 8.0 (espacio de nombres) 9.0 (modular)
npm
  • Para JavaScript
  • Para Node.js
  • Para JavaScript
  • Para Node.js
CDN (red de distribución de contenidos)
  • Para JavaScript
  • Para JavaScript
URL de Hosting
  • Para JavaScript
  • Para Node.js

Para obtener más información, consulta Formas de agregar los SDK de Web a tu app y Variantes del SDK de Firebase Web más adelante en esta página.

Versión 9 para apps nuevas

Si estás comenzando una nueva integración en Firebase, puedes habilitar el SDK de versión 9 cuando lo agregues e inicialices.

Cuando desarrolles tu app, ten en cuenta que el código se organizará principalmente en torno a funciones. En la versión 9, los servicios se pasan como el primer argumento y, luego, la función usa los detalles del servicio para hacer el resto. Por ejemplo:

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => {
  // Check for user status
});

Para ver más detalles y ejemplos, consulta las guías de cada área de producto y la documentación de referencia de la versión 9.

Formas de agregar los SDKs de Web a tu app

Firebase proporciona bibliotecas de JavaScript para la mayoría de los productos de Firebase, como Remote Config, FCM y muchos más. La forma de agregar los SDK de Firebase a tu app web depende de las herramientas que uses (como un agrupador de módulos) o si tu app se ejecuta en un entorno que no corresponde a un navegador, como Node.js.

Puedes agregar a tu app cualquiera de las bibliotecas disponibles a través de uno de los siguientes métodos compatibles:

  • npm (para agrupadores de módulos y Node.js)
  • CDN (red de distribución de contenidos)

Si quieres obtener instrucciones detalladas para la configuración, consulta Agrega Firebase a tu app de JavaScript. En el resto de este artículo, encontrarás información para que elijas una de las opciones disponibles.

npm

Descargar el paquete npm de Firebase (que incluye los conjuntos del navegador y Node.js) te proporciona una copia local del SDK de Firebase, que podría ser necesaria para las aplicaciones que no se ejecutan en un navegador, como las apps de Node.js, React Native o Electron. La descarga incluye los conjuntos de Node.js y React Native como opciones para algunos paquetes. Los conjuntos de Node.js son necesarios para el paso de renderizado del servidor (SSR) de los frameworks de SSR.

El uso de npm con un agrupador de módulos, como webpack o Rollup, proporciona opciones de optimización para eliminar el código sin usar y aplicar polyfills segmentados, lo que puede reducir notablemente el tamaño de tu app. Implementar estas funciones puede agregar complejidad a tu cadena de compilación y configuración, pero varias herramientas comunes de la CLI pueden mitigar ese efecto. Estas herramientas incluyen Angular, React, Vue y Next, entre otras.

Resumen:

  • Proporciona optimización valiosa del tamaño de la app.
  • Hay herramientas sólidas disponibles para administrar los módulos.
  • Es obligatorio para realizar la SSR con Node.js.

CDN (red de distribución de contenidos)

Agregar bibliotecas almacenadas en la CDN de Firebase es un método de configuración sencillo del SDK con el que muchos desarrolladores pueden estar familiarizados. Si usas la CDN para agregar los SDK, no necesitarás una herramienta de compilación, y es posible que tu cadena de compilación sea más sencilla y fácil de usar en comparación con los agrupadores de módulos. Si el tamaño de tu app instalada no es una preocupación principal y no tienes requisitos especiales como transpilar código de TypeScript, la CDN puede ser una buena opción.

Resumen:

  • Es un método conocido y sencillo.
  • Es adecuado cuando el tamaño de la app no es una de las preocupaciones principales.
  • Es adecuado cuando tu sitio web no usa herramientas de compilación.

Variantes del SDK de Firebase Web

Actualmente, Firebase proporciona dos variantes del SDK de Web:

  • Un conjunto de JavaScript que admite todas las funciones de Firebase para usarlas en el navegador
  • Un paquete de Node.js del cliente que admite muchas funciones de Firebase, pero no todas (consulta la lista de entornos compatibles)

Ambas variantes del SDK se diseñaron con el fin de facilitar la compilación de apps web o apps cliente para el acceso de los usuarios finales, como aplicaciones de Node.js para computadoras o IoT. Si tu objetivo es configurar el acceso de administrador desde entornos privilegiados (como servidores), usa el SDK de Firebase Admin en su lugar.

Detección del entorno con agrupadores y frameworks

Cuando instalas el SDK de Firebase Web con npm, se instalan las versiones de JavaScript y Node.js. El paquete proporciona detección detallada del entorno a fin de habilitar los conjuntos adecuados para tu aplicación.

Si tu código usa sentencias require de Node.js, el SDK encuentra el paquete específico de Node. De lo contrario, deberás establecer correctamente la configuración del empaquetador para que detecte el campo de punto de entrada adecuado en tu archivo package.json (por ejemplo, main, browser o module). Si experimentas errores en el entorno de ejecución con el SDK, verifica que el empaquetador esté configurado para priorizar el tipo de conjunto correcto para tu entorno.

Obtén información sobre el objeto de configuración de Firebase

Para inicializar Firebase en tu app, debes proporcionar la configuración del proyecto de Firebase de tu app. Puedes obtener tu objeto de configuración de Firebase en cualquier momento.

  • No recomendamos que edites manualmente el objeto de configuración, en especial, las siguientes “opciones de Firebase” obligatorias: apiKey, projectId y appID. Si inicializas tu app con valores no válidos o faltantes para estas “opciones de Firebase” obligatorias, los usuarios de tu app podrían experimentar problemas graves.

  • Si habilitaste Google Analytics en tu proyecto de Firebase, el objeto de configuración contiene el campo measurementId. Obtén más información sobre este campo en la página de introducción de Analytics.

  • Si habilitas Google Analytics o Realtime Database después de crear tu app web de Firebase, asegúrate de que el objeto de configuración de Firebase que uses en la app se actualice con los valores de configuración asociados (measurementId y databaseURL, respectivamente). Puedes obtener tu objeto de configuración de Firebase en cualquier momento.

El siguiente es un formato de objeto de configuración con todos los servicios habilitados (estos valores se propagan automáticamente):

var firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  // The value of `databaseURL` depends on the location of the database
  databaseURL: "https://DATABASE_NAME.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
  measurementId: "G-MEASUREMENT_ID",
};

Bibliotecas disponibles

Opciones de configuración adicionales

Retrasa la carga de los SDK de Firebase (desde CDN)

Puedes retrasar la inclusión de los SDK de Firebase hasta que se haya cargado toda la página. Si usas la versión 9 de las secuencias de comandos de la CDN con <script type="module">, este es el comportamiento predeterminado. Si usas la versión 8 de las secuencias de comandos de la CDN como módulo, completa estos pasos para diferir la carga:

  1. Agrega una marca defer a cada etiqueta script de los SDK de Firebase y, luego, aplaza la inicialización de Firebase con una segunda secuencia de comandos, como en el siguiente ejemplo:

    <script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>

<script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script>
<script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-firestore.js"></script>

// ...

<script defer src="./init-firebase.js"></script>

  2. Crea un archivo init-firebase.js y, luego, incluye lo siguiente en el archivo:

    // TODO: Replace the following with your app's Firebase project configuration
var firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Utiliza varios proyectos de Firebase en una sola app

En la mayoría de los casos, solo debes inicializar Firebase en una sola app predeterminada. Puedes acceder a Firebase desde esa app de dos maneras que son equivalentes:

Web version 9

import { initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage";
import { getFirestore } from "firebase/firestore";

// Initialize Firebase with a "default" Firebase project
const defaultProject = initializeApp(firebaseConfig);

console.log(defaultProject.name);  // "[DEFAULT]"

// Option 1: Access Firebase services via the defaultProject variable
let defaultStorage = getStorage(defaultProject);
let defaultFirestore = getFirestore(defaultProject);

// Option 2: Access Firebase services using shorthand notation
defaultStorage = getStorage();
defaultFirestore = getFirestore();
app_default_init_options.js

Web version 8

// Initialize Firebase with a "default" Firebase project
const defaultProject = firebase.initializeApp(firebaseConfig);

console.log(defaultProject.name);  // "[DEFAULT]"

// Option 1: Access Firebase services via the defaultProject variable
let defaultStorage = defaultProject.storage();
let defaultFirestore = defaultProject.firestore();

// Option 2: Access Firebase services using shorthand notation
defaultStorage = firebase.storage();
defaultFirestore = firebase.firestore();
firebaseapp.js

A veces, sin embargo, necesitas acceder a múltiples proyectos de Firebase al mismo tiempo. Por ejemplo, tal vez necesites leer datos de la base de datos de un proyecto de Firebase, pero almacenar archivos en un proyecto de Firebase diferente. O tal vez necesites autenticar un proyecto mientras anulas la autenticación de un segundo proyecto.

El SDK de Firebase JavaScript te permite inicializar y usar varios proyectos de Firebase en una sola app al mismo tiempo, y cada proyecto utiliza su propia información de configuración de Firebase.

Web version 9

import { initializeApp, getApp } from "firebase/app";
import { getStorage } from "firebase/storage";
import { getFirestore } from "firebase/firestore";

// Initialize Firebase with a default Firebase project
initializeApp(firebaseConfig);

// Initialize Firebase with a second Firebase project
const otherProject = initializeApp(otherProjectFirebaseConfig, "other");

console.log(getApp().name);  // "[DEFAULT]"
console.log(otherProject.name);    // "otherProject"

// Use the shorthand notation to access the default project's Firebase services
const defaultStorage = getStorage();
const defaultFirestore = getFirestore();

// Use the otherProject variable to access the second project's Firebase services
const otherStorage = getStorage(otherProject);
const otherFirestore = getFirestore(otherProject);
app_multi_project_init_options.js

Web version 8

// Initialize Firebase with a default Firebase project
firebase.initializeApp(firebaseConfig);

// Initialize Firebase with a second Firebase project
const otherProject = firebase.initializeApp(otherProjectFirebaseConfig, "other");

console.log(firebase.app().name);  // "[DEFAULT]"
console.log(otherProject.name);    // "otherProject"

// Use the shorthand notation to access the default project's Firebase services
const defaultStorage = firebase.storage();
const defaultFirestore = firebase.firestore();

// Use the otherProject variable to access the second project's Firebase services
const otherStorage = otherProject.storage();
const otherFirestore = otherProject.firestore();
firebaseapp.js

Ejecuta un servidor web local para el desarrollo

Si compilas una aplicación web, algunas partes del SDK de Firebase JavaScript necesitarán que tu aplicación web esté asociada con un servidor en lugar de un sistema de archivo local. Puedes utilizar Firebase CLI para ejecutar un servidor local.

Si ya configuraste Firebase Hosting para tu app, es posible que ya hayas completado varios de los siguientes pasos.

Para entregar tu app web, usarás Firebase CLI, una herramienta de línea de comandos.

  1. Consulta la documentación de Firebase CLI a fin de obtener información para instalar la CLI o actualizarla a su versión más reciente.

  2. Inicializa tu proyecto de Firebase. Ejecuta el siguiente comando desde la raíz del directorio local de apps:

    firebase init

  3. Inicia el servidor local para el desarrollo. Ejecuta el siguiente comando desde la raíz del directorio local de la app:

    firebase serve

Recursos de código abierto para los SDK de Firebase JavaScript

Firebase admite el desarrollo de código abierto, y motivamos las contribuciones y los comentarios de la comunidad.

SDK de Firebase JavaScript

La mayoría de los SDK de Firebase JavaScript se desarrollan como bibliotecas de código abierto en nuestro repositorio público de Firebase en GitHub.

Muestras de inicio rápido

Firebase conserva una colección de muestras de inicio rápido para la mayoría de las API de Firebase en la Web. Consulta estas muestras en nuestro repositorio de muestras de inicio rápido de Firebase en GitHub. También puedes usarlas como código de ejemplo para usar los SDK de Firebase.