Premiers pas avec Remote Config sur le Web

Vous pouvez utiliser Firebase Remote Config pour définir des paramètres dans votre application et mettre à jour leurs valeurs dans le cloud. Vous pouvez ainsi modifier l'apparence et le comportement de votre application sans distribuer de mise à jour d'application. Ce guide vous explique comment faire vos premiers pas et fournit un exemple de code, que vous pouvez cloner ou télécharger à partir du dépôt GitHub firebase/quickstart-js.

Étape 1 : Ajoutez et initialisez le SDK Remote Config

1. Si ce n'est pas déjà fait, installez le SDK JS Firebase et initialisez Firebase.

2. Ajoutez le SDK JS Remote Config 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 permet de stocker les valeurs de paramètre par défaut dans l'application, de récupérer les valeurs de paramètre mises à jour à partir du backend Remote Config et de contrôler quand les valeurs récupérées sont mises à la disposition de votre application.

Étape 2 : Définissez l'intervalle de récupération minimal

Pendant le développement, il est recommandé de définir un intervalle de récupération minimal relativement faible. Pour en savoir plus, consultez Limitation du débit.

// The default and recommended production fetch interval for Remote Config is 12 hours
remoteConfig.settings.minimumFetchIntervalMillis = 3600000;
rc_set_minimum_fetch_time.js

remoteConfig.settings.minimumFetchIntervalMillis = 3600000;
index.js

Étape 3 : Définissez les valeurs de paramètre par défaut dans l'application

Vous pouvez définir des valeurs de paramètres 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 que des 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 de backend 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

gcloud auth print-access-token

Les exemples suivants montrent deux façons d'importer et de définir des valeurs par défaut dans votre application. Le premier exemple utilise fetch, qui envoie 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 compilation :

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

Étape 4 : Obtenez les valeurs de paramètre à utiliser dans votre appli

Vous pouvez maintenant obtenir les valeurs des paramètres à partir de l'objet Remote Config. Si vous définissez ultérieurement des valeurs dans le backend, que vous les récupérez, puis que vous 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 en tant qu'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 de backend Remote Config, vous pouvez créer des valeurs par défaut côté serveur qui remplacent les valeurs intégrées à l'application en fonction de la logique conditionnelle ou du ciblage des utilisateurs de votre choix. Cette section vous explique comment créer ces valeurs dans la console Firebase.

1. Dans la console Firebase, accédez à la page DevOps et engagement > Remote Config > Paramètres.

2. Définissez des paramètres portant les mêmes noms que ceux 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 dans l'application) et vous pouvez également définir des valeurs conditionnelles. Pour en savoir plus, consultez Paramètres et conditions de Remote Config.

3. Si vous utilisez des conditions de signal personnalisées, définissez les attributs et leurs valeurs. L'exemple suivant montre comment définir une condition de signal personnalisée.

     let customSignals = {
        "city": "Tokyo",
        "preferred_event_category": "sports"
     }
   
     setCustomSignals(config, customSignals);

Étape 6 : Extraire et activer les valeurs

1. Pour récupérer les valeurs de paramètre 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 que les valeurs de paramètre récupérées soient disponibles pour votre application, appelez la méthode activate().

Si vous souhaitez récupérer et activer des valeurs en un seul appel, utilisez fetchAndActivate(), comme illustré 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 récupérées à un moment qui garantit une expérience fluide pour l'utilisateur, par exemple la prochaine fois qu'il ouvrira votre application. Pour en savoir plus et voir des exemples, consultez Stratégies de chargement de Remote Config.

Étape 7 : Écouter les mises à jour en temps réel

Après avoir récupéré les valeurs des paramètres, vous pouvez utiliser Remote Config en temps réel pour écouter les mises à jour du backend Remote Config. La fonctionnalité en temps réel Remote Config signale aux appareils connectés que des mises à jour sont disponibles et récupère automatiquement les modifications après la publication d'une nouvelle version de Remote Config.

1. Dans votre application, utilisez onConfigUpdate pour commencer à écouter les mises à jour et récupérer automatiquement les nouvelles valeurs de paramètre. Implémentez le rappel next pour activer la configuration mise à jour.

     onConfigUpdate(remoteConfig, {
        next: (configUpdate) => {
           console.log("Updated keys:", configUpdate.getUpdatedKeys());
           if (configUpdate.getUpdatedKeys().has("welcome_message")) {
              activate(remoteConfig).then(() => {
              showWelcomeMessage();
              });
           }
        },
        error: (error) => {
           console.log("Config update error:", error);
        },
        complete: () => {
           console.log("Listening stopped.");
        }
     });

2. La prochaine fois que vous publierez une nouvelle version de votre Remote Config, les appareils qui exécutent votre application et qui écoutent les modifications appelleront le gestionnaire d'achèvement.

Limitations

Si une application effectue trop de récupérations sur une courte période, les appels de récupération peuvent être limités. Dans ce cas, le SDK génère une erreur FETCH_THROTTLE. Nous vous recommandons d'intercepter cette erreur et de réessayer en mode d'intervalle exponentiel entre les tentatives, en attendant des intervalles plus longs entre les requêtes de récupération suivantes.

Lors du développement d'une application, vous pouvez actualiser le cache très fréquemment (plusieurs fois par heure) pour effectuer des itérations rapides pendant le développement et le test de votre application. Pour permettre une itération rapide sur un projet impliquant de nombreux développeurs, vous pouvez ajouter temporairement une propriété avec un intervalle de récupération minimal 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. Cela signifie que les configurations ne seront pas récupérées à partir du backend plus d'une fois par période 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. Paramètre dans Settings.minimumFetchIntervalMillis.
2. La valeur par défaut est de 12 heures.