Firebase Remote Config 使用入门


您可以使用 Firebase Remote Config 来定义应用中的参数并在云端更新它们的值。这样,您无需更新应用即可修改应用的外观和行为。本指南介绍了入门步骤并提供了一些示例代码,所有这些代码都可以从 firebase/quickstart-js GitHub 代码库中克隆或下载。

第 1 步:添加并初始化 Remote Config SDK

  1. 如果您尚未安装 Firebase JS SDK 并初始化 Firebase,请先安装并进行初始化。

  2. 添加 Remote Config JS SDK 并初始化 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();

此对象用于存储应用内默认参数值,从 Remote Config 后端提取更新后的参数值,以及控制提取的值何时可供应用使用。

第 2 步:设置最小提取间隔

在开发期间,建议设置相对较短的最小提取间隔。如需了解详情,请参阅限制

Web

remoteConfig.settings.minimumFetchIntervalMillis = 3600000;

Web

remoteConfig.settings.minimumFetchIntervalMillis = 3600000;

第 3 步:设置应用内默认参数值

您可以在 Remote Config 对象中设置应用内默认参数值,以便应用在连接到 Remote Config 后端之前能够按预期运行,并且在后端中尚未设置任何值时可以使用默认值。

Web

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

Web

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

如果您已配置 Remote Config 后端参数值,则可以下载包含所有默认值的 JSON 文件,并将其包含在 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

Firebase 控制台

  1. 参数标签页中,打开菜单,然后选择下载默认值
  2. 看到提示时,启用 .json (web),然后点击下载文件

以下示例展示了在应用中导入和设置默认值的两种不同方法。第一个示例使用 fetch,它会向 app bundle 中包含的默认文件发出 HTTP 请求:


  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() 方法,并传入参数键作为调用的实参。

Web

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

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

Web

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

第 5 步:设置参数值

使用 Firebase 控制台或 Remote Config 后端 API,您可以创建新的服务器端默认值,这些值会根据您希望的条件逻辑或用户定位条件来替换应用内的值。本部分介绍了在 Firebase 控制台中创建这些值的步骤。

  1. Firebase 控制台中,打开您的项目。
  2. 从菜单中选择 Remote Config,查看 Remote Config 信息中心。
  3. 使用您在应用中指定的参数名称来定义参数。对于每个参数,您可以设置默认值(最终将替换应用内默认值),也可以设置条件值。如需了解详情,请参阅 Remote Config 参数和条件

第 6 步:提取并激活值

  1. 如需从 Remote Config 后端提取参数值,请调用 fetchConfig() 方法。系统将提取您在后端中设置的所有值,并将其缓存在 Remote Config 对象中。
  2. 如需将提取的参数值提供给您的应用,请调用 activate() 方法。

如果您想在一次调用中提取并激活值,请使用 fetchAndActivate(),如下例所示:

Web

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

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

Web

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

由于这些更新后的参数值会影响应用的行为和外观,因此您应在提取后谨慎选择激活这些值的时机,以确保为用户提供流畅的体验,例如在用户下次打开您的应用时激活。如需更多信息和示例,请参阅 Remote Config 加载策略

限制

如果应用在短时间内提取次数太多,提取调用可能会受到限制。在这种情况下,SDK 会抛出 FETCH_THROTTLE 错误。建议您捕获此错误,并在指数退避模式下重试,在两次后续提取请求之间等待更长的时间间隔。

在应用开发期间,您可能需要非常频繁地(每小时很多次)刷新缓存,从而可以在开发和测试应用时进行快速迭代。为方便有众多开发者的项目快速迭代,您可以在应用中临时添加一个具有较短最小提取间隔 (Settings.minimumFetchIntervalMillis) 的属性。

Remote Config 默认和建议的生产提取间隔为 12 小时,这意味着无论实际上调用了多少次提取方法,在 12 小时的时间段内最多从后端提取一次配置。具体而言,系统按以下顺序确定最小提取间隔:

  1. Settings.minimumFetchIntervalMillis 中的参数。
  2. 默认值 12 小时。

后续步骤

浏览 Remote Config 使用场景并查看一些关键的概念和高级策略文档(如果您尚未这样做),包括: