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 señalarle recursos para obtener más información.

Si tiene preguntas sobre un tema que no se cubre 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.

SDK versiones 8 y 9

Firebase ofrece dos versiones de SDK para aplicaciones web:

  • Versión 8. Esta es la interfaz de JavaScript que Firebase ha mantenido durante varios años y es familiar para los desarrolladores web con aplicaciones de Firebase existentes. Debido a que Firebase eliminará la compatibilidad con esta versión después de un ciclo de lanzamiento importante, las nuevas aplicaciones deberían adoptar la versión 9.
  • Versión modular 9 . Este SDK presenta un enfoque modular que proporciona un tamaño de SDK reducido y una mayor eficiencia con herramientas modernas de creación de JavaScript, como webpack o Rollup .

La versión 9 se integra bien con las herramientas de compilación que eliminan el código que no se usa 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 versión 8, 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 del SDK de la versión 9 sigue los mismos patrones que la versión 8, la organización del código es diferente. Generalmente, la versión 8 está orientada hacia un espacio de nombres y un patrón de servicio, mientras que la versión 9 está orientada hacia funciones discretas. Por ejemplo, el encadenamiento de puntos de la versión 8, como firebaseApp.auth() , se reemplaza en la versión 9 por una sola función getAuth() que toma firebaseApp y devuelve una instancia de autenticación.

Esto significa que las aplicaciones web creadas con la versión 8 o anterior requieren una refactorización para aprovechar el enfoque modular de la versión 9. Firebase proporciona bibliotecas compatibles para facilitar esa transición; consulte la guía de actualización para obtener más detalles.

¿Qué es compatible?

Si bien la versión 8 y la versión 9 tienen diferentes estilos de código, brindan un soporte muy similar para las funciones y opciones de Firebase. Como describiremos en detalle en esta guía, ambas versiones de SDK son compatibles con las variantes de JavaScript y Node.js junto con varias opciones para agregar/instalar los SDK.

Agregar SDK con 8.0 (espacio de nombres) 9.0 (modulares)
npm
  • Para JavaScript
  • Para Node.js
  • Para JavaScript
  • Para Node.js
CDN (Red de entrega de contenido)
  • Para JavaScript
  • Para JavaScript
URL de alojamiento
  • Para JavaScript
  • Para Node.js

Para obtener más información, consulte Formas de agregar los SDK web a su aplicación y las variantes de SDK web de Firebase más adelante en esta página.

Versión 9 para nuevas aplicaciones

Si está comenzando una nueva integración con Firebase, puede optar por el SDK de la versión 9 cuando agregue e inicialice el SDK .

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

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 en que agrega los SDK de Firebase a su aplicación web depende de las herramientas que esté usando con su aplicación (como un paquete de módulos), o si su aplicación se ejecuta en un entorno sin navegador, como Node.js.

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

  • npm (para paquetes de módulos y Node.js)
  • CDN (red de entrega de contenido)

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

npm

La descarga del paquete Firebase npm (que incluye paquetes de navegador y Node.js) le proporciona una copia local del SDK de Firebase, que puede ser necesario para aplicaciones que no sean de navegador, como aplicaciones Node.js, React Native o Electron. La descarga incluye paquetes de 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 funciones puede agregar cierta complejidad a su configuración y cadena de compilación, pero varias herramientas de CLI principales pueden ayudar a mitigar eso. Estas herramientas incluyen Angular , React , Vue , Next y otras.

En resumen:

  • Proporciona una valiosa optimización del tamaño de la aplicación
  • Herramientas robustas están disponibles para administrar módulos
  • Requerido para SSR con Node.js

CDN (red de entrega de contenido)

Agregar bibliotecas que están almacenadas en la CDN de Firebase es un método de configuración de SDK simple que puede ser familiar para muchos desarrolladores. Si utiliza la CDN para agregar los SDK, no necesitará una herramienta de compilación y su cadena de compilación 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 transpilar desde TypeScript, CDN podría ser una buena opción.

En resumen:

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

Actualmente, Firebase ofrece dos variantes de Web SDK:

  • Un paquete de JavaScript compatible con todas las funciones de Firebase para usar en el navegador.
  • Un paquete de Node.js del lado del cliente que admite muchas funciones de Firebase, pero no todas. Consulte la lista de entornos admitidos .

Ambas variantes de SDK están diseñadas para ayudar a crear aplicaciones web o aplicaciones de cliente para el acceso del usuario final, como en una aplicación de IoT o de escritorio Node.js. Si su objetivo es configurar el acceso administrativo desde entornos privilegiados (como servidores), use el SDK de Firebase Admin en su lugar.

Detección de entorno con paquetes y marcos

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

Si su código usa declaraciones de 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, asegúrese de 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 su aplicación, debe proporcionar la configuración del proyecto de Firebase de su 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 invá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 inicio de Analytics .

  • Si habilita Google Analytics o Realtime Database después de crear su aplicación web de 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 de datosURL, 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

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

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

  1. Agregue un indicador de defer a cada etiqueta de secuencia de script para los SDK de Firebase y, a continuación, aplace la inicialización de Firebase mediante 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 , 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);
    

Use múltiples proyectos de Firebase en una sola aplicación

En la mayoría de los casos, solo tiene que inicializar Firebase en una sola aplicación predeterminada. Puede acceder a Firebase desde esa aplicación de dos formas 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();

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();

Sin embargo, a veces es necesario acceder a varios proyectos de Firebase al mismo tiempo. Por ejemplo, es posible que desee leer datos de la base de datos de un proyecto de Firebase pero almacenar archivos en un proyecto de Firebase diferente. O es posible que desee autenticar un proyecto y mantener un segundo proyecto sin autenticar.

El SDK de JavaScript de Firebase le 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 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);

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();

Ejecute un servidor web local para el desarrollo

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

Si ya configuró Firebase Hosting para su aplicación, es posible que ya haya completado varios de los pasos a continuación.

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

  1. Visite la documentación de Firebase CLI para obtener información sobre cómo instalar la 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 admite el desarrollo de código abierto y alentamos las contribuciones y los 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 muestras 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 . Puede usar estos inicios rápidos como código de ejemplo para usar los SDK de Firebase.