Obtenga más información sobre Web y Firebase

Mientras desarrolla una aplicación web con Firebase, es posible que encuentre conceptos desconocidos o áreas en las que necesite más información para tomar las decisiones correctas para su proyecto. Esta página tiene como objetivo responder esas preguntas o indicarle recursos para obtener más información.

Si tiene preguntas sobre un tema que no se trata en esta página, visite una de nuestras comunidades en línea . También actualizaremos esta página con nuevos temas periódicamente, así que vuelva a consultar para ver si hemos agregado el tema sobre el que desea obtener información.

Versiones del SDK: con espacio de nombres y modular

Firebase proporciona dos superficies API para aplicaciones web:

  • JavaScript: espacio de nombres. Esta es la interfaz de JavaScript que Firebase mantuvo durante muchos años y que resulta familiar para los desarrolladores web con aplicaciones de Firebase más antiguas. Debido a que la API con espacio de nombres no se beneficia del soporte continuo de nuevas funciones, la mayoría de las aplicaciones nuevas deberían 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 con herramientas de compilación que eliminan el código que no se utiliza en su aplicación, un proceso conocido como "sacudida de árboles". Las aplicaciones creadas con este SDK se benefician de un tamaño muy reducido. La API de espacio de nombres, aunque está disponible como módulo, no tiene una estructura estrictamente modular y no proporciona el mismo grado de reducción de tamaño.

Aunque la mayoría de las API modulares siguen los mismos patrones que las API con espacios de nombres, la organización del código es diferente. Generalmente, la API con espacio de nombres está orientada hacia un espacio de nombres y un patrón de servicio, mientras que la API modular está orientada hacia funciones discretas. Por ejemplo, el encadenamiento de puntos de la API con espacio de nombres, como firebaseApp.auth() , se reemplaza en la API modular por una única función getAuth() que toma firebaseApp y devuelve una instancia de autenticación.

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

JavaScript: API modular para nuevas aplicaciones

Si está comenzando una nueva integración con Firebase, puede optar por la API modular cuando agrega e inicializa el SDK .

A medida que desarrolle su aplicación, tenga en cuenta que su código se organizará principalmente en torno a funciones . En la API modular, los servicios se pasan como primer argumento y luego la función utiliza 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 obtener más ejemplos y detalles, consulte las guías de cada área de producto, así como la documentación de referencia de la API modular .

Formas de agregar los SDK web a su aplicación

Firebase proporciona bibliotecas de JavaScript para la mayoría de los productos de Firebase, incluidos Remote Config, FCM y más. La forma de agregar los SDK de Firebase a tu aplicación web depende de las herramientas que uses con tu aplicación (como un paquete de módulos).

Puede agregar cualquiera de las bibliotecas disponibles a su aplicación mediante uno de los métodos admitidos:

  • npm (para paquetes de módulos)
  • CDN (red de entrega de contenidos)

Para obtener instrucciones de configuración detalladas, consulte Agregar Firebase a su aplicación JavaScript . El resto de esta sección contiene información para ayudarle a elegir entre las opciones disponibles.

npm

La descarga del paquete Firebase npm (que incluye paquetes de navegador y de Node.js) le proporciona una copia local del SDK de Firebase, que puede ser necesaria para aplicaciones que no son de navegador, como aplicaciones de Node.js, React Native o Electron. La descarga incluye paquetes Node.js y React Native como opción para algunos paquetes. Los paquetes de Node.js son necesarios para el paso de representación del lado del servidor (SSR) de los marcos SSR.

El uso de npm con un paquete de módulos como webpack o Rollup proporciona opciones de optimización para "sacudir el árbol" del código no utilizado y aplicar polyfills específicos, lo que puede reducir en gran medida el tamaño de su aplicación. La implementación de estas características puede agregar cierta complejidad a su configuración y cadena de compilación, pero varias herramientas CLI convencionales pueden ayudar a mitigar esto. Estas herramientas incluyen Angular , React , Vue , Next y otras.

En resumen:

  • Proporciona una valiosa optimización del tamaño de la aplicación
  • Hay herramientas sólidas disponibles para administrar módulos
  • Requerido para SSR con Node.js

CDN (red de entrega de contenidos)

Agregar bibliotecas almacenadas en la CDN de Firebase es un método de configuración de SDK simple que puede resultar familiar para muchos desarrolladores. Al utilizar la CDN para agregar los SDK, no necesitará una herramienta de compilación y su cadena de compilación puede tender a ser más simple y fácil de trabajar en comparación con los paquetes de módulos. Si no está especialmente preocupado por el tamaño instalado de su aplicación y no tiene requisitos especiales como la transpilación desde TypeScript, entonces CDN podría ser una buena opción.

En resumen:

  • Familiar y sencillo
  • Apropiado cuando el tamaño de la aplicación no es una preocupación importante
  • Apropiado cuando su sitio web no utiliza herramientas de construcción.

Variantes del SDK web de Firebase

El SDK web de Firebase se puede utilizar tanto en el navegador como en las aplicaciones de Node. Sin embargo, varios productos no están disponibles en entornos Node. Consulte la lista de entornos compatibles .

Algunos SDK de productos proporcionan variantes de navegador y de nodo independientes, 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 su configuración de herramientas o entorno y no debería requerir selección manual en la mayoría de los casos. Todas las variantes del SDK están diseñadas para ayudar a crear aplicaciones web o aplicaciones cliente para el acceso del usuario final, como en una aplicación de escritorio o IoT de Node.js. Si su objetivo es configurar el acceso administrativo desde entornos privilegiados (como servidores), utilice el SDK de administrador de Firebase .

Detección de entornos con paquetes y marcos.

Cuando instala Firebase Web SDK usando npm, se instalan las versiones de JavaScript y Node.js. El paquete proporciona una detección detallada del entorno para habilitar los paquetes adecuados para su aplicación.

Si su código utiliza declaraciones require de Node.js, el SDK encuentra el paquete específico de Node. De lo contrario, la configuración de su paquete debe calcularse correctamente para detectar el campo de punto de entrada correcto en su archivo package.json (por ejemplo, main , browser o module ). Si experimenta errores de tiempo de ejecución con el SDK, verifique que su paquete esté configurado para priorizar el tipo correcto de paquete para su entorno.

Más información sobre el objeto de configuración de Firebase

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

  • No recomendamos editar manualmente su objeto de configuración, especialmente las siguientes "opciones de Firebase" requeridas: apiKey , projectId y appID . Si inicializa su aplicación con valores no válidos o faltantes para estas "opciones de Firebase" requeridas, los usuarios de su aplicación pueden experimentar problemas graves.

  • Si habilitó Google Analytics en su proyecto de Firebase, su objeto de configuración contiene el campo measurementId . Obtenga más información sobre este campo en la página de introducción a Analytics .

  • Si habilita Google Analytics o Realtime Database después de crear su aplicación web Firebase, asegúrese de que el objeto de configuración de Firebase que usa en su aplicación esté actualizado con los valores de configuración asociados ( measurementId y databaseURL , respectivamente). Puede obtener su objeto de configuración de Firebase en cualquier momento.

Este es el formato de un objeto de configuración con todos los servicios habilitados (estos valores se completan 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

Retraso en 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 está utilizando secuencias de comandos CDN de API modulares con <script type="module"> , este es el comportamiento predeterminado. Si está utilizando secuencias de comandos CDN con espacios de nombres como módulo, complete estos pasos para posponer la carga:

  1. Agrega una marca defer a cada etiqueta script para los SDK de Firebase y luego pospone la inicialización de Firebase usando una segunda secuencia de comandos, por 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. Cree un archivo init-firebase.js y luego incluya lo siguiente en el archivo:

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

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Utilice varios proyectos de Firebase en una sola aplicación

En la mayoría de los casos, solo tienes que inicializar Firebase en una única aplicación predeterminada. Puedes acceder a Firebase desde esa aplicación de dos formas equivalentes:

Web modular API

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 namespaced API

// 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 varios proyectos de Firebase al mismo tiempo. Por ejemplo, es posible que desees leer datos de la base de datos de un proyecto de Firebase pero almacenar archivos en un proyecto de Firebase diferente. O quizás desee autenticar un proyecto y mantener un segundo proyecto sin autenticar.

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

Web modular API

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 namespaced API

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

Ejecute un servidor web local para el desarrollo.

Si estás creando una aplicación web, algunas partes del SDK de JavaScript de Firebase requieren que entregues tu aplicación web desde un servidor en lugar de desde el sistema de archivos local. Puede utilizar Firebase CLI para ejecutar un servidor local.

Si ya configuraste Firebase Hosting para tu aplicación, es posible que ya hayas completado varios de los pasos a continuación.

Para ofrecer su aplicación web, utilizará Firebase CLI, una herramienta de línea de comandos.

  1. Visite la documentación de Firebase CLI para aprender cómo instalar CLI o actualizar a su última versión .

  2. Inicializa tu proyecto de Firebase. Ejecute el siguiente comando desde la raíz del directorio de su aplicación local:

    firebase init

  3. Inicie el servidor local para el desarrollo. Ejecute el siguiente comando desde la raíz del directorio de su aplicación local:

    firebase serve

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

Firebase apoya el desarrollo de código abierto y alentamos las contribuciones y comentarios de la comunidad.

SDK de JavaScript de Firebase

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

Ejemplos de inicio rápido

Firebase mantiene una colección de ejemplos de inicio rápido para la mayoría de las API de Firebase en la Web. Encuentre estos inicios rápidos en nuestro repositorio público de inicio rápido de Firebase GitHub . Puedes usar estas guías de inicio rápido como código de ejemplo para usar los SDK de Firebase.