Check out what’s new from Firebase at Google I/O 2022. Learn more

Premiers pas avec Firebase Remote Config

Vous pouvez utiliser Firebase Remote Config pour définir des paramètres dans votre application et mettre à jour leurs valeurs dans le cloud, ce qui vous permet de modifier l'apparence et le comportement de votre application sans distribuer de mise à jour d'application. Ce guide vous guide à travers les étapes de démarrage et fournit des exemples de code, qui peuvent tous être clonés ou téléchargés à partir du référentiel firebase/quickstart-js GitHub.

Ajouter et initialiser le SDK de configuration à distance

  1. Si vous ne l'avez pas déjà fait, installez le SDK Firebase JS et initialisez Firebase .

  2. Ajoutez le SDK Remote Config JS et initialisez Remote Config :

Web version 9

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 version 8

import firebase from "firebase/app";
import "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
firebase.initializeApp(firebaseConfig);


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

Cet objet est utilisé pour stocker les valeurs de paramètre par défaut dans l'application, récupérer les valeurs de paramètre mises à jour à partir du backend Remote Config et contrôler le moment où les valeurs récupérées sont mises à la disposition de votre application.

Définir l'intervalle de récupération minimal

Au cours du développement, il est recommandé de définir un intervalle d'extraction minimal relativement faible. Voir Limitation pour plus d'informations.

Web version 9

remoteConfig.settings.minimumFetchIntervalMillis = 3600000;

Web version 8

remoteConfig.settings.minimumFetchIntervalMillis = 3600000;

Définir les valeurs des paramètres par défaut dans l'application

Vous pouvez définir des valeurs de paramètre par défaut dans l'application dans l'objet Remote Config, afin que votre application se comporte comme prévu avant de se connecter au backend Remote Config, et pour que les valeurs par défaut soient disponibles si aucune n'est définie sur le backend.

Web version 9

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

Web version 8

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

Si vous avez déjà configuré les valeurs des paramètres backend de Remote Config, vous pouvez télécharger un fichier JSON généré qui inclut toutes les valeurs par défaut et l'inclure dans votre app bundle :

LE REPOS

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

Console Firebase

  1. Dans l'onglet Paramètres , ouvrez le menu et sélectionnez Télécharger les valeurs par défaut .
  2. Lorsque vous y êtes invité, activez .json pour le Web , puis cliquez sur Télécharger le fichier .

Les exemples suivants montrent deux manières différentes d'importer et de définir des valeurs par défaut dans votre application. Le premier exemple utilise fetch , qui enverra une requête HTTP au fichier par défaut inclus dans votre app bundle :


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

L'exemple suivant utilise require , qui compile les valeurs dans votre application au moment de la génération :

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

Obtenir les valeurs des paramètres à utiliser dans votre application

Vous pouvez maintenant obtenir des valeurs de paramètre à partir de l'objet Remote Config. Si vous définissez ultérieurement des valeurs dans le backend, les récupérez, puis les activez, ces valeurs sont disponibles pour votre application. Pour obtenir ces valeurs, appelez la méthode getValue() , en fournissant la clé de paramètre comme argument.

Web version 9

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

const val = getValue(remoteConfig, "welcome_messsage");

Web version 8

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

Définir les valeurs des paramètres

À l'aide de la console Firebase ou des API backend de Remote Config , vous pouvez créer de nouvelles valeurs par défaut côté serveur qui remplacent les valeurs de l'application en fonction de la logique conditionnelle ou du ciblage utilisateur que vous souhaitez. Cette section vous guide à travers les étapes de la console Firebase pour créer ces valeurs.

  1. Dans la console Firebase , ouvrez votre projet.
  2. Sélectionnez Remote Config dans le menu pour afficher le tableau de bord Remote Config.
  3. Définissez des paramètres avec les mêmes noms que les paramètres que vous avez définis dans votre application. Pour chaque paramètre, vous pouvez définir une valeur par défaut (qui remplacera éventuellement la valeur par défaut de l'application) et vous pouvez également définir des valeurs conditionnelles. Pour en savoir plus, consultez Paramètres et conditions de configuration à distance .

Récupérer et activer des valeurs

  1. Pour récupérer les valeurs des paramètres à partir du backend Remote Config, appelez la méthode fetchConfig() . Toutes les valeurs que vous définissez sur le backend sont extraites et mises en cache dans l'objet Remote Config.
  2. Pour rendre les valeurs de paramètre récupérées disponibles pour votre application, appelez la méthode activate() .

Pour les cas où vous souhaitez récupérer et activer des valeurs en un seul appel, utilisez fetchAndActivate() comme indiqué dans cet exemple :

Web version 9

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

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

Web version 8

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

Étant donné que ces valeurs de paramètre mises à jour affectent le comportement et l'apparence de votre application, vous devez activer les valeurs extraites à un moment qui garantit une expérience fluide pour votre utilisateur, comme la prochaine fois que l'utilisateur ouvre votre application. Voir Stratégies de chargement de Remote Config pour plus d'informations et d'exemples.

Étranglement

Si une application est récupérée trop de fois sur une courte période, les appels de récupération peuvent être limités. Dans de tels cas, le SDK génère une erreur FETCH_THROTTLE . Il est recommandé d'intercepter cette erreur et de réessayer en mode d'attente exponentielle, en attendant des intervalles plus longs entre les requêtes d'extraction suivantes.

Pendant le développement de l'application, vous souhaiterez peut-être actualiser le cache très fréquemment (plusieurs fois par heure) pour vous permettre d'itérer rapidement au fur et à mesure que vous développez et testez votre application. Pour permettre une itération rapide sur un projet avec de nombreux développeurs, vous pouvez temporairement ajouter une propriété avec un intervalle de récupération minimum faible ( Settings.minimumFetchIntervalMillis ) dans votre application.

L'intervalle de récupération de production par défaut et recommandé pour Remote Config est de 12 heures, ce qui signifie que les configurations ne seront pas récupérées plus d'une fois depuis le backend dans une fenêtre de 12 heures, quel que soit le nombre d'appels de récupération réellement effectués. Plus précisément, l'intervalle de récupération minimal est déterminé dans l'ordre suivant :

  1. Le paramètre dans Settings.minimumFetchIntervalMillis .
  2. La valeur par défaut de 12 heures.

Next steps

If you haven't already, explore the Remote Config use cases , and take a look at some of the key concepts and advanced strategies documentation, including:

,

You can use Firebase Remote Config to define parameters in your app and update their values in the cloud, allowing you to modify the appearance and behavior of your app without distributing an app update. This guide walks you through the steps to get started and provides some sample code, all of which is available to clone or download from the firebase/quickstart-js GitHub repository.

Add and initialize the Remote Config SDK

  1. If you haven't already, install the Firebase JS SDK and initialize Firebase .

  2. Add the Remote Config JS SDK and initialize Remote Config:

Web version 9

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 version 8

import firebase from "firebase/app";
import "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
firebase.initializeApp(firebaseConfig);


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

This object is used to store in-app default parameter values, fetch updated parameter values from the Remote Config backend, and control when fetched values are made available to your app.

Set minimum fetch interval

During development, it's recommended to set a relatively low minimum fetch interval. See Throttling for more information.

Web version 9

remoteConfig.settings.minimumFetchIntervalMillis = 3600000;

Web version 8

remoteConfig.settings.minimumFetchIntervalMillis = 3600000;

Set in-app default parameter values

You can set in-app default parameter values in the Remote Config object, so that your app behaves as intended before it connects to the Remote Config backend, and so that default values are available if none are set on the backend.

Web version 9

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

Web version 8

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

If you have already configured Remote Config backend parameter values, you can download a generated JSON file that includes all default values and include it in your app bundle:

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

  1. In the Parameters tab, open the Menu , and select Download default values .
  2. When prompted, enable .json for web , then click Download file .

The following examples show two different ways you could import and set default values in your app. The first example uses fetch , which will make an HTTP request to the defaults file included in your app bundle:


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

The next example uses require , which compiles the values into your app at build time:

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

Get parameter values to use in your app

Now you can get parameter values from the Remote Config object. If you later set values in the backend, fetch them, and then activate them, those values are available to your app.To get these values, call the getValue() method, providing the parameter key as an argument.

Web version 9

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

const val = getValue(remoteConfig, "welcome_messsage");

Web version 8

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

Set parameter values

Using the Firebase console or the Remote Config backend APIs , you can create new server-side default values that override the in-app values according to your desired conditional logic or user targeting. This section walks you through the Firebase console steps to create these values.

  1. In the Firebase console , open your project.
  2. Select Remote Config from the menu to view the Remote Config dashboard.
  3. Define parameters with the same names as the parameters that you defined in your app. For each parameter, you can set a default value (which will eventually override the in-app default value) and you can also set conditional values. To learn more, see Remote Config Parameters and Conditions .

Fetch and activate values

  1. To fetch parameter values from the Remote Config backend, call the fetchConfig() method. Any values that you set on the backend are fetched and cached in the Remote Config object.
  2. To make fetched parameter values available to your app, call the activate() method.

For cases where you want to fetch and activate values in one call, use fetchAndActivate() as shown in this example:

Web version 9

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

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

Web version 8

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

Because these updated parameter values affect the behavior and appearance of your app, you should activate the fetched values at a time that ensures a smooth experience for your user, such as the next time that the user opens your app. See Remote Config loading strategies for more information and examples.

Throttling

If an app fetches too many times in a short time period, fetch calls may be throttled. In such cases, the SDK throws a FETCH_THROTTLE error. You are recommended to catch this error and retry in exponential backoff mode, waiting longer intervals between subsequent fetch requests.

During app development, you might want to refresh the cache very frequently (many times per hour) to let you rapidly iterate as you develop and test your app. To accommodate rapid iteration on a project with numerous developers, you can temporarily add a property with a low minimum fetch interval ( Settings.minimumFetchIntervalMillis ) in your app.

The default and recommended production fetch interval for Remote Config is 12 hours, which means that configs won't be fetched from the backend more than once in a 12 hour window, regardless of how many fetch calls are actually made. Specifically, the minimum fetch interval is determined in the following order:

  1. The parameter in Settings.minimumFetchIntervalMillis .
  2. The default value of 12 hours.

Next steps

If you haven't already, explore the Remote Config use cases , and take a look at some of the key concepts and advanced strategies documentation, including: