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. Ce guide vous explique les étapes de démarrage et fournit un exemple de code, cloner ou télécharger à partir de firebase/quickstart-js dépôt GitHub.

É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 JavaScript Remote Config et initialisez Remote Config :

Web

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

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, extraction mise à jour les valeurs de paramètre depuis le backend Remote Config, et contrôler le moment de la récupération sont mises à la disposition de votre application.

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

Lors du développement, nous vous recommandons de définir un intervalle de récupération minimal relativement faible. Consultez la section Limitation pour plus d'informations.

Web

remoteConfig.settings.minimumFetchIntervalMillis = 3600000;

Web

remoteConfig.settings.minimumFetchIntervalMillis = 3600000;

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

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

Web

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

Web

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

Si vous avez déjà configuré Remote Config valeurs de paramètre de backend, vous pouvez télécharger un fichier JSON généré qui inclut toutes les valeurs par défaut et à 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

Console Firebase

  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 le fichier .json pour le Web, puis cliquez sur Télécharger le fichier.

Les exemples suivants illustrent deux façons différentes d'importer et de définir des valeurs par défaut dans votre application. Le premier exemple utilise fetch, qui génère HTTP vers le 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ètres à utiliser dans votre application

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

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

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

Web

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

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

À l'aide de la console Firebase ou des API backend Remote Config, 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 Il vous guide tout au long des étapes de création de ces valeurs dans la console Firebase.

  1. Dans la console Firebase, ouvrez votre projet.
  2. Sélectionnez Remote Config dans le menu pour afficher les Remote Config. tableau de bord.
  3. Définissez les paramètres en leur attribuant 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 remplacer finalement la valeur par défaut dans l'application) et vous pouvez aussi définir des valeurs conditionnelles. Pour en savoir plus, consultez Paramètres et conditions Remote Config :

Étape 6 : Extrayez et activez les valeurs

  1. Pour récupérer les valeurs de paramètre à 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 mis en cache dans l'objet Remote Config.
  2. Pour que les valeurs des paramètres 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 le montre cet exemple:

Web

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

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

Web

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

Étant donné que ces nouvelles valeurs de paramètres ont une incidence sur le comportement et l'apparence de votre application, vous devez activer les valeurs récupérées à un moment une expérience fluide pour l'utilisateur, comme la prochaine fois qu'il ouvrira votre l'application. Consultez l'article Stratégies de chargement Remote Config. pour obtenir plus d'informations et d'exemples.

Limitations

Si une application récupère trop de fois sur une courte période, les appels d'extraction peuvent être est limité. Dans ce cas, le SDK génère une erreur FETCH_THROTTLE. Il est recommandé d'intercepter cette erreur et de réessayer en mode intervalle exponentiel entre les tentatives. d'attendre des intervalles plus longs entre les requêtes de récupération 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'effectuer rapidement des itérations au fur et à mesure que vous développez et testez l'application. Pour faciliter l'itération rapide d'un projet avec de nombreux développeurs, vous peut ajouter temporairement une propriété avec un intervalle de récupération minimal faible (Settings.minimumFetchIntervalMillis) dans votre application.

Intervalle de récupération en production par défaut et recommandé pour Remote Config est de 12 heures, ce qui signifie que les configurations ne seront pas extraites du backend plus d'une fois toutes les 12 heures quel que soit le nombre d'appels 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. Valeur par défaut de 12 heures.

Étapes suivantes

Si vous ne l'avez pas déjà fait, explorez les Remote Config cas d'utilisation, et nous allons nous intéresser la documentation sur les concepts clés et les stratégies avancées, notamment: