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, vous permettant ainsi 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, tous disponibles pour être clonés ou téléchargés à partir du référentiel GitHub firebase/quickstart-js .

Étape 1 : 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 :

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

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

Cet objet est utilisé pour stocker les valeurs des paramètres par défaut dans l'application, récupérer les valeurs des paramètres 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.

Étape 2 : Définir l'intervalle de récupération minimum

Pendant le développement, il est recommandé de définir un intervalle de récupération minimum relativement faible. Voir Limitation pour plus d’informations.

remoteConfig.settings.minimumFetchIntervalMillis = 3600000;
rc_set_minimum_fetch_time.js

remoteConfig.settings.minimumFetchIntervalMillis = 3600000;
index.js

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

Vous pouvez définir les valeurs des paramètres par défaut de 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.

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

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

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 bundle d'applications :

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

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 de valeurs 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 construction :

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

Étape 4 : Obtenez les valeurs des paramètres à utiliser dans votre application

Vous pouvez désormais obtenir les valeurs des paramètres à 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.

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

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

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

Étape 5 : Définir les valeurs des paramètres

À l'aide de la console Firebase ou des API backend 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 des utilisateurs souhaités. 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 portant 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 .

Étape 6 : Récupérer et activer les 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 récupérées et mises en cache dans l'objet Remote Config.
2. Pour rendre les valeurs des paramètres récupérées disponibles pour votre application, appelez la méthode activate() .

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

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

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

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

Étant donné que ces valeurs de paramètres mises à jour affectent le comportement et l'apparence de votre application, vous devez activer les valeurs récupérées à un moment qui garantit une expérience fluide à votre utilisateur, par exemple la prochaine fois que l'utilisateur ouvrira votre application. Consultez les stratégies de chargement de Remote Config pour plus d’informations et des exemples.

Étranglement

Si une application récupère 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é de détecter cette erreur et de réessayer en mode d'attente exponentielle, en attendant des intervalles plus longs entre les requêtes de récupération suivantes.

Pendant le développement d'une application, vous souhaiterez peut-être actualiser le cache très fréquemment (plusieurs fois par heure) pour vous permettre d'itérer rapidement pendant que vous développez et testez votre application. Pour permettre une itération rapide sur un projet avec de nombreux développeurs, vous pouvez ajouter temporairement 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 du backend plus d'une fois 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 minimum 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:

• Manage Remote Config template versions
• Config loading strategies