開始在網頁上使用遠端設定

您可以使用 Firebase Remote Config 定義應用程式中的參數，並在雲端更新參數值，這樣一來，不必發布應用程式更新，就能修改應用程式的外觀和行為。本指南將逐步引導您完成入門步驟，並提供一些程式碼範例，您可以從 firebase/quickstart-js GitHub 存放區複製或下載這些範例。

步驟 1：新增並初始化 Remote Config SDK

1. 如果尚未 安裝 Firebase JS SDK 並初始化 Firebase，請先完成這些步驟。

2. 新增 Remote Config JS SDK 並初始化 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 檔案，其中包含所有預設值，並將其納入應用程式套件：

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 要求：

  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 控制台或 Remote Config 後端 API，建立新的伺服器端預設值，根據所需的條件邏輯或指定使用者覆寫應用程式內的值。本節將逐步引導您在 Firebase 控制台建立這些值。

1. 在 Firebase 控制台中，依序前往 「DevOps & Engagement」>「遠端設定」>「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

這些更新後的參數值會影響應用程式的行為和外觀，因此請在適當時間啟用擷取的值，確保使用者享有流暢體驗，例如在使用者下次開啟應用程式時啟用。詳情和範例請參閱「遠端設定載入策略」。

步驟 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 小時。