Начало работы с Remote Config на веб-платформе

С помощью Firebase Remote Config можно задавать параметры в приложении и обновлять их значения в облаке, чтобы менять внешний вид и поведение приложения без выпуска обновлений. В этом руководстве приведены пошаговые инструкции по началу работы и примеры кода, которые можно клонировать или скачать из репозитория GitHub firebase/quickstart-js.

Шаг 1. Добавьте и инициализируйте SDK Remote Config

1. Если вы ещё этого не сделали, установите Firebase JS SDK и инициализируйте Firebase.

2. Добавьте JS SDK Remote Config и инициализируйте 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();

Этот объект используется для хранения значений параметров по умолчанию, получения обновленных значений параметров из серверной части Remote Config и управления тем, когда полученные значения становятся доступными для вашего приложения.

Шаг 2. Задайте минимальный интервал получения

Во время разработки рекомендуется задать относительно низкий минимальный интервал получения. Подробнее об ограничении пропускной способности…

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

Шаг 3. Задайте значения параметров по умолчанию в приложении

Вы можете задать значения параметров по умолчанию в объекте Remote Config, чтобы приложение работало корректно до подключения к серверу Remote Config и чтобы значения по умолчанию были доступны, если они не заданы на сервере.

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

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

Если вы уже настроили значения параметров серверной части Remote Config, вы можете скачать сгенерированный JSON-файл со всеми значениями по умолчанию и включить его в набор 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

В примерах ниже показано два способа импорта и установки значений по умолчанию в приложении. В первом примере используется fetch, который отправляет HTTP-запрос к файлу со значениями по умолчанию, включенному в набор App Bundle.

  const rcDefaultsFile = await fetch('remote_config_defaults.json');
  const rcDefaultsJson = await rcDefaultsFile.json();
  remoteConfig.defaultConfig = rcDefaultsJson;
  

В следующем примере используется require, который компилирует значения в приложение во время сборки:

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

Шаг 4. Получите значения параметров, которые будут использоваться в приложении

Теперь вы можете получать значения параметров из объекта Remote Config. Если вы позже зададите значения в серверной части, получите их и активируете, они станут доступны в приложении.Чтобы получить эти значения, вызовите метод getValue(), указав ключ параметра в качестве аргумента.

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

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

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

Шаг 5. Задайте значения параметров

С помощью консоли Firebase или серверных API Remote Config можно создать новые значения по умолчанию на стороне сервера, которые будут переопределять значения в приложении в соответствии с заданной условной логикой или таргетингом на пользователей. В этом разделе рассказывается, как создать эти значения в консоли Firebase.

1. В консоли Firebase перейдите на страницу DevOps & Engagement (DevOps и вовлечение) > Remote Config (Удаленная конфигурация) > Parameters (Параметры).

2. Задайте параметры с теми же названиями, что и в приложении. Для каждого параметра можно установить значение по умолчанию (которое в конечном итоге переопределит значение по умолчанию в приложении), а также условные значения. Подробнее о параметрах и условиях Remote Config…

3. Если вы используете условия для специальных сигналов, задайте атрибуты и их значения. В примере ниже показано, как задать условие для специального сигнала.

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

Шаг 6. Получите и активируйте значения

1. Чтобы получить значения параметров из серверной части Remote Config, вызовите метод fetchConfig(). Все значения, заданные на сервере, извлекаются и кешируются в объекте Remote Config.
2. Чтобы сделать полученные значения параметров доступными для приложения, вызовите метод activate().

Если вы хотите получить и активировать значения за один вызов, используйте fetchAndActivate(), как показано в примере ниже.

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

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

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

Поскольку эти обновленные значения параметров влияют на поведение и внешний вид приложения, их следует активировать в тот момент, когда это не помешает пользователю, например при следующем открытии приложения. Дополнительную информацию и примеры можно найти в статье Стратегии загрузки Remote Config.

Шаг 7. Прослушивайте обновления в реальном времени

После получения значений параметров вы можете использовать Remote Config в реальном времени, чтобы отслеживать обновления из серверной части Remote Config. Remote Config в реальном времени сообщает подключенным устройствам о доступности обновлений и автоматически получает изменения после публикации новой версии Remote Config.

1. В приложении используйте onConfigUpdate, чтобы начать прослушивание обновлений и автоматически получать новые значения параметров. Реализуйте обратный вызов next, чтобы активировать обновленную конфигурацию.

     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. При следующей публикации новой версии Remote Config устройства, на которых запущено приложение и которые отслеживают изменения, вызовут обработчик завершения.

Ограничение пропускной способности

Если приложение выполняет слишком много запросов за короткий период времени, вызовы могут быть ограничены. В таких случаях SDK выдает ошибку FETCH_THROTTLE. Рекомендуем перехватывать эту ошибку и повторять попытку в режиме экспоненциальной выдержки, увеличивая интервалы между последующими запросами на получение.

При разработке приложения может потребоваться часто обновлять кеш (несколько раз в час), чтобы быстро выполнять итерации. Чтобы ускорить итерации в проекте с большим количеством разработчиков, вы можете временно добавить в приложение свойство с низким минимальным интервалом получения (Settings.minimumFetchIntervalMillis).

Рекомендуемый интервал получения данных для рабочей версии Remote Config по умолчанию составляет 12 часов. Это означает, что конфигурации будут запрашиваться из серверной части не чаще одного раза в 12 часов, независимо от того, сколько вызовов получения данных было сделано. Минимальный интервал получения определяется в следующем порядке:

1. Параметр в Settings.minimumFetchIntervalMillis.
2. Значение по умолчанию – 12 часов.