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.

É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 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.

Étape 2 : 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.

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 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.

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 app bundle :

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 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 : 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.

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 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 .

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

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è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.

Prochaines étapes

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