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. En esta guía, se explican los pasos para comenzar y se proporcionan códigos 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 JS de Remote Config y, luego, inicializa Remote Config:

API modular 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);

API con espacio de nombres 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 parámetros predeterminados en la app, recuperar valores de 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.

API modular web

remoteConfig.settings.minimumFetchIntervalMillis = 3600000;rc_set_minimum_fetch_time.js

API con espacio de nombres web

remoteConfig.settings.minimumFetchIntervalMillis = 3600000;index.js

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

Puedes configurar los valores de parámetros predeterminados 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.

API modular web

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

API con espacio de nombres web

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

Si ya configuraste los valores de 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

Firebase console

En la pestaña Parámetros, abre el Menú y selecciona Descargar valores predeterminados.
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 valores de 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.

API modular web

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

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

API con espacio de nombres 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.

Abre el proyecto en Firebase console.
Selecciona Remote Config desde el menú para ver el panel de la función.
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 estableces 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:

API modular web

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

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

API con espacio de nombres 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, los parámetros de configuración 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: