Premiers pas avec Remote Config sur le Web

Sélectionnez une plate-forme :

iOS+ Android Web Flutter Unity C++

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. Ce guide vous explique comment commencer 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 Remote Config SDK

Remarque : Lorsque vous installez le SDK, vous avez la possibilité d'ajouter la dépendance pour Analytics. Analytics est requis pour Remote Config's ciblage conditionnel des instances d'application avec des propriétés utilisateur et des audiences.

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

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

Web

En savoir plus sur l' API Web modulaire avec suppression de code mort et passer de l'API avec espace de noms.

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

En savoir plus sur l' API Web modulaire avec suppression de code mort et passer de l'API avec espace de noms.

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ètres par défaut dans l'application, d'extraire les valeurs de paramètres mises à jour à partir du backend Remote Configet de contrôler le moment où les valeurs extraites sont mises à la disposition de votre application.

Étape 2 : Définissez un intervalle d'extraction minimal

Lors du développement, il est recommandé de définir un intervalle d'extraction minimal relativement faible. Pour en savoir plus, consultez Limitations pour plus d'informations.

Web

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

Web

remoteConfig.settings.minimumFetchIntervalMillis = 3600000;
index.js

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

Vous pouvez définir des valeurs de paramètres par défaut dans l'application dans l'Remote Config objet. Ainsi, votre application se comporte comme prévu avant de se connecter au Remote Config backend, et des valeurs par défaut sont disponibles si aucune n'est définie dans le backend.

Important : Ne stockez pas de données confidentielles dans les clés ou lesRemote Config valeurs des paramètres. Remote Config données sont chiffrées en transit, mais les utilisateurs finaux peuvent accéder à n'importe quel paramètre Remote Config par défaut ou extrait disponible pour leur instance d'application cliente.

Web

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

Web

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

Si vous avez déjà configuré les valeurs de paramètres du 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 :

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

Vous pouvez générer un jeton porteur en exécutant la commande suivante à l'aide de la Google Cloud CLI ou de Cloud Shell :

gcloud auth print-access-token

Ce jeton a une courte durée de vie. Vous devrez peut-être le regénérer si vous recevez une erreur d'authentification.

Firebase console

1. Dans l'onglet Paramètres, ouvrez le Menu, puis 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 envoie 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 compilation :

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

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

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

Web

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

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

Web

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

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

À l'aide de la Firebase console ou des Remote Config backend API, vous pouvez créer des valeurs par défaut côté serveur qui remplacent les valeurs dans l'application en fonction de la logique conditionnelle ou du ciblage utilisateur souhaités. Cette section vous explique comment créer ces valeurs dans la Firebase console étapes.

1. Dans la Firebase console, 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 ceux que vous avez définis dans votre application. Pour chaque paramètre, vous pouvez définir une valeur par défaut (qui finira par remplacer la valeur par défaut dans l'application) et des valeurs conditionnelles. Pour en savoir plus, consultez Remote Config Paramètres et Conditions.

4. 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 : Extrayez et activez les valeurs

1. Pour extraire les valeurs de paramètres du Remote Config backend, appelez la fetchConfig() méthode. Toutes les valeurs que vous définissez dans le backend sont extraites et mises en cache dans l' Remote Config objet.
2. Pour mettre les valeurs de paramètres extraites à la disposition de votre application, appelez la activate() méthode.

Si vous souhaitez extraire et activer des valeurs en un seul appel, utilisez fetchAndActivate() comme illustré dans cet exemple :

Web

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

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

Web

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 extraites à un moment qui garantit une expérience fluide pour votre utilisateur, par exemple la prochaine fois qu'il ouvre votre application. Pour en savoir plus et obtenir des exemples, consultez Stratégies de chargement de Remote Config.

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

Une fois que vous avez extrait les valeurs de paramètres, vous pouvez utiliser Remote Config en temps réel pour écouter les mises à jour du backend Remote Config. Real-time Remote Config signale aux appareils connectés lorsque des mises à jour sont disponibles et extrait automatiquement les modifications après la publication d'une nouvelle Remote Config version.

Important : Real-time Remote Config nécessite également l' Firebase Remote Config Realtime API, qui doit déjà être activée pour vous. Pour vérifier, ouvrez la Google Cloud console, sélectionnez votre projet, puis ouvrez la page API et services. L'API doit apparaître comme activée. Si elle est manquante ou non activée, cliquez sur Activer les API et les services, recherchez Firebase Remote Config Realtime API, puis activez-la.

1. Dans votre application, utilisez onConfigUpdate pour commencer à écouter les mises à jour et extraire automatiquement toutes les nouvelles valeurs de paramètres. 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 écoutent les modifications appelleront le gestionnaire d'achèvement.

Limitations

Si une application extrait des données trop souvent dans un court laps de temps, les appels d'extraction 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 d'extraction suivantes.

Lors du développement d'une application, vous pouvez actualiser le cache très fréquemment (plusieurs fois par heure) pour itérer rapidement lors du développement et du test de 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 d'extraction minimal faible (Settings.minimumFetchIntervalMillis) dans votre application.

L'intervalle d'extraction de production par défaut et recommandé pour Remote Config est de 12 heures. Cela signifie que les configurations ne seront extraites du backend qu'une seule fois dans une fenêtre de 12 heures, quel que soit le nombre d'appels d'extraction réellement effectués. Plus précisément, l'intervalle d'extraction minimal est déterminé dans l'ordre suivant :

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

N'oubliez pas que ce paramètre ne doit être utilisé que pour le développement, et non pour une application en production. Si vous ne faites que tester votre application avec une petite équipe de développement de 10 personnes, il est peu probable que vous atteigniez les limites de quota côté service par heure. Toutefois, si vous avez déployé votre application auprès de milliers de testeurs avec un intervalle d'extraction minimal très faible, votre application atteindra probablement ce quota.