Comprende Firebase para la Web

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.

Versiones del SDK: modular y con espacios de nombres

Firebase proporciona dos plataformas de API para apps web:

  • JavaScript: con espacio de nombres. 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 más antiguas de Firebase. Debido a que la API con espacio de nombres no se beneficia de la compatibilidad continua con funciones nuevas, la mayoría de las apps nuevas deben adoptar la API modular.
  • JavaScript: Modular. Este SDK se basa en un enfoque modular que proporciona un tamaño de SDK reducido y una mayor eficiencia con herramientas modernas de compilación de JavaScript, como webpack o Rollup.

La API modular 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 API con espacio de nombres, 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 las APIs modulares siguen los mismos patrones que las APIs con espacio de nombres, la organización del código es diferente. En general, la API con espacio de nombres está segmentada a un patrón de espacio de nombres y servicios, mientras que la API modular está segmentada a funciones discretas. Por ejemplo, la cadena de puntos de la API con espacio de nombres, como firebaseApp.auth(), se reemplaza en la API modular por una sola función getAuth() que toma firebaseApp y devuelve una instancia de Authentication.

Esto significa que las apps web creadas con la API con espacio de nombres requieren la refactorización para aprovechar el diseño modular de la app. Consulta la guía de actualización para obtener más detalles.

JavaScript: API modular para apps nuevas

Si estás comenzando una nueva integración en Firebase, puedes habilitar la API modular cuando agregues e inicialices el SDK.

Cuando desarrolles tu app, ten en cuenta que el código se organizará principalmente en torno a functions. En la API modular, 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 API modular.

Formas de agregar los SDK web a tu app

Firebase proporciona bibliotecas de JavaScript para la mayoría de los productos de Firebase, incluidos 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 con ella (como un agrupador de módulos).

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)
  • 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

El SDK web de Firebase se puede usar en aplicaciones del navegador y de Node. Sin embargo, varios productos no están disponibles en los entornos de Node. Consulta la lista de entornos compatibles.

Algunos SDK de productos proporcionan variantes independientes del navegador y del nodo, cada una de las cuales se proporciona en formatos ESM y CJS, y algunos SDK de productos incluso proporcionan variantes de Cordova o React Native. El SDK web está configurado para proporcionar la variante correcta según la configuración o el entorno de las herramientas, por lo que no debería requerir una selección manual en la mayoría de los casos. Todas las variantes del SDK están diseñadas para ayudar a compilar apps web o apps cliente para el acceso de usuario final, como en una aplicación de computadora o IoT de Node.js. Si tu objetivo es configurar el acceso de administrador desde entornos privilegiados (como servidores), usa el Firebase Admin SDK 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. La excepción a esto es authDomain, que se puede actualizar siguiendo las prácticas recomendadas para usar signInWithRedirect.

  • 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",
  // The value of `storageBucket` depends on when you provisioned your default bucket (learn more)
  storageBucket: "PROJECT_ID.firebasestorage.app",
  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 secuencias de comandos de la CDN de la API modular con <script type="module">, este es el comportamiento predeterminado. Si usas secuencias de comandos de CDN con espacio de nombres 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

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

// 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

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

// 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 app web, algunas partes del SDK de Firebase JavaScript necesitarán que tu app 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 para 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.