Catch up on everthing we announced at this year's Firebase Summit. Learn more

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 alguna pregunta acerca de un tema no cubierto 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 proporciona 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 a los desarrolladores de aplicaciones Web con base de fuego 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 introduce un enfoque modular que proporciona SDK reduce el tamaño y mayor eficiencia con modernas herramientas de construcción, tales como JavaScript webpack o paquete acumulativo .

La versión 9 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 "sacudir á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, la versión 8 de Dot-encadenamiento, tales como firebaseApp.auth() , se sustituye en la versión 9 por un solo getAuth() función 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 de compatibilidad para facilitar esa transición; ver la guía de actualización para 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 (modular)
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, ver formas de añadir los SDK Web a su aplicación y Firebase Web SDK variantes más adelante en esta página.

Versión 9 para nuevas aplicaciones

Si vas a empezar en una nueva integración con Firebase, se puede optar en el SDK versión 9 cuando se agrega e inicializar el SDK .

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

Puede añadir cualquiera de las bibliotecas disponibles para 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 distribución de contenido)

Para obtener instrucciones detalladas de configuración, consulte Añadir Firebase a su aplicación JavaScript . El resto de esta sección contiene información que le ayudará a elegir entre las opciones disponibles.

npm

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

El uso de la NGP con un módulo bundler como webpack o paquete acumulativo proporciona opciones de optimización para "árbol-shake" código no utilizado y aplicar polyfills específicas, que pueden reducir en gran medida el tamaño de la huella 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 eso. Estas herramientas incluyen angular , Reaccionar , Vue , Siguiente , y otros.

En resumen:

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

CDN (red de distribución de contenido)

Agregar bibliotecas que se almacenan en la CDN de Firebase es un método simple de configuración del SDK que puede resultar familiar para muchos desarrolladores. Al usar 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 más 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 de TypeScript, entonces CDN podría ser una buena opción.

En resumen:

  • Familiar y simple
  • 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 de Firebase Web

Actualmente, Firebase ofrece dos variantes de Web SDK:

  • Un paquete de JavaScript que admite todas las funciones de Firebase para su uso en el navegador.
  • Un paquete de Node.js del lado del cliente que admite muchas, pero no todas, las funciones de Firebase. Vea la lista de los entornos compatibles .

Ambas variantes de 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 IoT o de escritorio Node.js. Si su objetivo es configurar el acceso administrativo a entornos privilegiados (como servidores) utilizar el SDK del administrador Firebase lugar.

Detección de entornos con paquetes y marcos

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

Si el código utiliza Node.js require declaraciones, el SDK encuentra el paquete de nodo específico. De lo contrario, los ajustes de la bundler deben ser figurado correctamente para detectar el campo punto de entrada correcto en su package.json archivo (por ejemplo, main , browser , o module ). Si experimenta errores de tiempo de ejecución con el SDK, verifique que su agrupador 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. Se puede obtener el objeto de configuración Firebase en cualquier momento.

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

  • Si ha habilitado Google Analytics en su proyecto Firebase, el objeto de configuración contiene el campo measurementId . Más información sobre este campo en los Analítica página Introducción .

Este es el formato de un objeto de configuración con todos los servicios habilitados (estos valores se completan automáticamente):

// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  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 está utilizando la versión 9 guiones CDN con <script type="module"> , este es el comportamiento predeterminado. Si está utilizando scripts de la versión 8 de CDN como módulo, complete estos pasos para aplazar la carga:

  1. Añadir un defer bandera para cada script etiqueta para la base del fuego SDK, entonces aplazar la inicialización de Firebase utilizando una segunda secuencia de comandos, por ejemplo:

    <script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
    
    <script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-firestore.js"></script>
    
    // ...
    
    <script defer src="./init-firebase.js"></script>
    
  2. Crear una init-firebase.js archivo, a continuación, incluir lo siguiente en el archivo:

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

Usa varios proyectos de Firebase en una sola aplicación

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

Versión web 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();

Versión web 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();

A veces, sin embargo, 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 puede querer autenticar un proyecto mientras mantiene 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.

Versión web 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);

Versión web 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 Firebase JavaScript requieren que entregue su aplicación web desde un servidor en lugar de desde el sistema de archivos local. Se puede utilizar el 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, usará Firebase CLI, una herramienta de línea de comandos.

  1. Visita la documentación Firebase CLI para aprender a instalar la CLI o la actualización de su versión más reciente .

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

    firebase init

  3. Iniciar 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 Firebase JavaScript

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

SDK de Firebase JavaScript

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

Muestras 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. Encontrar estos inicios rápidos en nuestro pública repositorio GitHub Firebase inicio rápido . Puede usar estas guías de inicio rápido como código de ejemplo para usar los SDK de Firebase.