Mira demostraciones sobre cómo compilar y ejecutar apps impulsadas por IA con Firebase en el Demo Day de 2024. Míralo ahora.

Comienza a usar Firebase Remote Config

Puedes usar Firebase Remote Config para definir los parámetros en tu app y actualizar sus valores en la nube, lo que te permite modificar el aspecto y el comportamiento de la app sin distribuir una actualización de la app. En esta guía, se explican los pasos para comenzar y se proporciona código de muestra que puedes clonar o descargar desde el repositorio firebase/quickstart-js de GitHub.

Paso 1: Agrega y, luego, inicializa el SDK de Remote Config

Si aún no lo has hecho, instala el SDK de Firebase JS y, luego, inicializa Firebase.
Agrega el SDK de Remote Config JS y, luego, inicializa Remote Config:

Web

import { initializeApp } from "firebase/app";
import { getRemoteConfig } from "firebase/remote-config";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Remote Config and get a reference to the service
const remoteConfig = getRemoteConfig(app);

Web

import firebase from "firebase/compat/app";
import "firebase/compat/remote-config";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Remote Config and get a reference to the service
const remoteConfig = firebase.remoteConfig();

El objeto se usa para almacenar los valores de los parámetros predeterminados en la app, recuperar los valores de los parámetros actualizados desde el backend de Remote Config y controlar cuándo están disponibles los valores recuperados para la app.

Paso 2: Establece un intervalo de recuperación mínimo

Durante el desarrollo, se recomienda establecer un intervalo de recuperación mínimo relativamente bajo. Consulta la sección Regulación para obtener más detalles.

Web

remoteConfig.settings.minimumFetchIntervalMillis = 3600000;rc_set_minimum_fetch_time.js

Web

remoteConfig.settings.minimumFetchIntervalMillis = 3600000;index.js

Paso 3: Configura los valores de parámetros predeterminados en la app

Puedes configurar los valores de los parámetros predeterminados en la app del objeto de Remote Config para que la app se comporte según lo previsto antes de que se conecte al backend de Remote Config y para que los valores predeterminados estén disponibles si no hay ninguno configurado en el backend.

Web

remoteConfig.defaultConfig = {
  "welcome_message": "Welcome"
};rc_set_default_values.js

Web

remoteConfig.defaultConfig = {
  "welcome_message": "Welcome"
};index.js

Si ya configuraste los valores de los parámetros de backend de Remote Config, puedes descargar un archivo JSON generado que incluya todos los valores predeterminados y, luego, incluirlo en el paquete de aplicación:

REST

curl --compressed -D headers -H "Authorization: Bearer token" -X GET https://firebaseremoteconfig.googleapis.com/v1/projects/my-project-id/remoteConfig:downloadDefaults?format=JSON -o remote_config_defaults.json

Consola de Firebase

En la pestaña Parameters, abre el menú y selecciona Download default values.
Cuando se solicite, habilita .json para la Weby, luego, haz clic en Descargar archivo.

En los siguientes ejemplos, se muestran dos maneras diferentes de importar y establecer valores predeterminados en tu app. En el primer ejemplo, se usa fetch, que realizará una solicitud HTTP al archivo predeterminado que se incluye en el paquete de aplicación:


  const rcDefaultsFile = await fetch('remote_config_defaults.json');
  const rcDefaultsJson = await rcDefaultsFile.json();
  remoteConfig.defaultConfig = rcDefaultsJson;

En el siguiente ejemplo, se usa require, que compila los valores en tu app en el tiempo de compilación:

  let rcDefaults = require('./remote_config_defaults.json');
  remoteConfig.defaultConfig = rcDefaults;

Paso 4: Obtén los valores de los parámetros para usarlos en tu app

Ahora puedes obtener los valores de los parámetros desde el objeto de Remote Config. Si más tarde configuras valores en el backend, los recuperas y los activas, esos valores estarán disponibles para tu app. Si quieres obtenerlos, llama al método getValue() y proporciona la clave del parámetro como argumento.

Web

import { getValue } from "firebase/remote-config";

const val = getValue(remoteConfig, "welcome_messsage");rc_get_values.js

Web

const val = remoteConfig.getValue("welcome_messsage");index.js

Paso 5: Configura los valores de los parámetros

Con Firebase console o las APIs de backend de Remote Config, puedes crear nuevos valores predeterminados del servidor que anulen los valores de la app según la lógica condicional o la segmentación de usuarios que desees. En esta sección, se explican los pasos que debes seguir en Firebase console para crear esos valores.

En Firebase console, abre tu proyecto.
Selecciona Remote Config en el menú para ver el panel de Remote Config.
Define parámetros que tengan los mismos nombres que los que definiste en la app. Puedes definir un valor predeterminado (que, en última instancia, anulará el valor predeterminado de la app) o valores condicionales para cada parámetro. Para obtener más información, consulta Parámetros y condiciones de Remote Config.

Paso 6: Recupera y activa valores

Para recuperar valores de los parámetros del backend de Remote Config, llama al método fetchConfig(). Todos los valores que establezcas en el backend se recuperan y almacenan en caché en el objeto de Remote Config.
Para que los valores de parámetros recuperados estén disponibles en la app, llama al método activate().

Para los casos en los que desees recuperar y activar valores en una llamada, usa fetchAndActivate() como se muestra en este ejemplo:

Web

import { fetchAndActivate } from "firebase/remote-config";

fetchAndActivate(remoteConfig)
  .then(() => {
    // ...
  })
  .catch((err) => {
    // ...
  });rc_fetch_config_callback.js

Web

remoteConfig.fetchAndActivate()
  .then(() => {
    // ...
  })
  .catch((err) => {
    // ...
  });index.js

Dado que estos valores de parámetros actualizados influyen en el comportamiento y el aspecto de la app, debes activar los valores recuperados en un momento en el que se garantice una experiencia fluida para el usuario, como la próxima vez que abra la app. Consulta las estrategias de carga de Remote Config para obtener más información y ejemplos.

Regulación

Si una app realiza recuperaciones muchas veces en poco tiempo, es posible que se regulen las llamadas de recuperación. En estos casos, el SDK muestra un error FETCH_THROTTLE. Te recomendamos detectar este error y volver a intentarlo en el modo de retirada exponencial, esperando intervalos más largos entre las solicitudes de recuperación posteriores.

Durante el desarrollo de la app, te recomendamos actualizar la caché con mucha frecuencia (varias veces por hora) para que puedas iterar con rapidez mientras desarrollas y pruebas tu app. Para permitir iteraciones rápidas en un proyecto con varios desarrolladores, puedes agregar temporalmente una propiedad con un intervalo de recuperación mínimo bajo (Settings.minimumFetchIntervalMillis) en la app.

En Remote Config, el intervalo de recuperación para la producción predeterminado y recomendado es de 12 horas, es decir, las configuraciones no se recuperarán desde el backend más de una vez en un período de 12 horas, sin importar cuántas llamadas se realicen. Específicamente, el intervalo de recuperación mínimo se determina en el siguiente orden:

El parámetro de Settings.minimumFetchIntervalMillis
El valor predeterminado de 12 horas

Próximos pasos

Si aún no lo has hecho, explora los casos de uso de Remote Config y revisa algunos de los conceptos clave y la documentación de estrategias avanzadas, en las que se incluye lo siguiente: