Erste Schritte mit Remote Config im Web

Mit Firebase Remote Config können Sie Parameter in Ihrer App definieren und ihre Werte in der Cloud aktualisieren. So können Sie das Erscheinungsbild und Verhalten Ihrer App ändern, ohne ein App-Update veröffentlichen zu müssen. In diesem Leitfaden werden die ersten Schritte beschrieben und es wird Beispielcode bereitgestellt, den Sie aus dem GitHub-Repository firebase/quickstart-js klonen oder herunterladen können.

Schritt 1: Remote Config SDK hinzufügen und initialisieren

1. Installieren Sie das Firebase JS SDK und initialisieren Sie Firebase, falls noch nicht geschehen.

2. Fügen Sie das Remote Config JS SDK hinzu und initialisieren Sie 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();

Dieses Objekt wird verwendet, um In-App-Standardparameterwerte zu speichern, aktualisierte Parameterwerte aus dem Remote Config-Backend abzurufen und zu steuern, wann abgerufene Werte für Ihre App verfügbar gemacht werden.

Schritt 2: Mindestabrufintervall festlegen

Während der Entwicklung wird empfohlen, ein relativ niedriges Mindestabrufintervall festzulegen. Weitere Informationen finden Sie unter Drosselung.

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

Schritt 3: In-App-Standardparameterwerte festlegen

Sie können im Remote Config-Objekt In-App-Standardparameterwerte festlegen, damit sich Ihre App wie gewünscht verhält, bevor sie eine Verbindung zum Remote Config-Backend herstellt. Außerdem sind so Standardwerte verfügbar, wenn im Backend keine festgelegt sind.

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

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

Wenn Sie bereits Remote Config-Backend-Parameterwerte konfiguriert haben, können Sie eine generierte JSON-Datei herunterladen, die alle Standardwerte enthält, und sie in Ihr App-Bundle einfügen:

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

Die folgenden Beispiele zeigen zwei verschiedene Möglichkeiten, wie Sie Standardwerte in Ihre App importieren und festlegen können. Im ersten Beispiel wird fetch verwendet, wodurch eine HTTP-Anfrage an die Standarddatei in Ihrem App-Bundle gesendet wird:

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

Im nächsten Beispiel wird require verwendet, wodurch die Werte beim Erstellen in Ihre Anwendung kompiliert werden:

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

Schritt 4: Parameterwerte zur Verwendung in Ihrer App abrufen

Jetzt können Sie Parameterwerte aus dem Remote Config-Objekt abrufen. Wenn Sie später Werte im Backend festlegen, diese abrufen und dann aktivieren, sind diese Werte für Ihre App verfügbar.Um diese Werte abzurufen, rufen Sie die Methode getValue() auf und geben Sie den Parameterschlüssel als Argument an.

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

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

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

Schritt 5: Parameterwerte festlegen

Über die Firebase Console oder die Remote Config Backend APIs können Sie neue serverseitige Standardwerte erstellen, die die In-App-Werte gemäß der gewünschten bedingten Logik oder dem gewünschten Nutzer-Targeting überschreiben. In diesem Abschnitt werden die Schritte in der Firebase Console zum Erstellen dieser Werte beschrieben.

1. Rufen Sie in der Firebase-Konsole die Seite DevOps & Engagement > Remote Config > Parameter auf.

2. Definieren Sie Parameter mit denselben Namen wie die Parameter, die Sie in Ihrer App definiert haben. Für jeden Parameter können Sie einen Standardwert festlegen, der schließlich den Standardwert in der App überschreibt. Außerdem können Sie bedingte Werte festlegen. Weitere Informationen finden Sie unter Remote Config-Parameter und -Bedingungen.

3. Wenn Sie benutzerdefinierte Signalbedingungen verwenden, definieren Sie die Attribute und ihre Werte. Im folgenden Beispiel wird gezeigt, wie Sie eine benutzerdefinierte Signalbedingung definieren.

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

Schritt 6: Werte abrufen und aktivieren

1. Wenn Sie Parameterwerte aus dem Remote Config-Backend abrufen möchten, rufen Sie die Methode fetchConfig() auf. Alle Werte, die Sie im Backend festlegen, werden abgerufen und im Remote Config-Objekt im Cache gespeichert.
2. Wenn Sie die abgerufenen Parameterwerte für Ihre App verfügbar machen möchten, rufen Sie die Methode activate() auf.

Wenn Sie Werte in einem Aufruf abrufen und aktivieren möchten, verwenden Sie fetchAndActivate(), wie in diesem Beispiel gezeigt:

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

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

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

Da sich diese aktualisierten Parameterwerte auf das Verhalten und das Erscheinungsbild Ihrer App auswirken, sollten Sie die abgerufenen Werte zu einem Zeitpunkt aktivieren, der eine reibungslose Nutzung für den Nutzer ermöglicht, z. B. wenn der Nutzer Ihre App das nächste Mal öffnet. Weitere Informationen und Beispiele finden Sie unter Ladestrategien für Remote Config.

Schritt 7: Echtzeit-Updates erhalten

Nachdem Sie Parameterwerte abgerufen haben, können Sie mit Echtzeit-Remote Config auf Aktualisierungen vom Remote Config-Backend warten. In Echtzeit signalisiert Remote Config verbundenen Geräten, wenn Updates verfügbar sind, und ruft die Änderungen automatisch ab, nachdem Sie eine neue Remote Config-Version veröffentlicht haben.

1. Verwenden Sie in Ihrer App onConfigUpdate, um auf Updates zu warten und automatisch neue Parameterwerte abzurufen. Implementieren Sie den Callback next, um die aktualisierte Konfiguration zu aktivieren.

     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. Wenn Sie das nächste Mal eine neue Version Ihrer Remote Config veröffentlichen, rufen Geräte, auf denen Ihre App ausgeführt wird und die auf Änderungen warten, den Abschluss-Handler auf.

Drosselung

Wenn eine App innerhalb eines kurzen Zeitraums zu viele Abrufe durchführt, werden die Abrufaufrufe möglicherweise gedrosselt. In solchen Fällen gibt das SDK einen FETCH_THROTTLE-Fehler aus. Es wird empfohlen, diesen Fehler abzufangen und den Vorgang im exponentiellen Backoff-Modus zu wiederholen. Dabei sollten Sie zwischen den einzelnen Abrufanfragen längere Intervalle einplanen.

Während der App-Entwicklung möchten Sie den Cache möglicherweise sehr häufig (mehrmals pro Stunde) aktualisieren, um die App schnell zu entwickeln und zu testen. Um eine schnelle Iteration bei einem Projekt mit zahlreichen Entwicklern zu ermöglichen, können Sie Ihrer App vorübergehend eine Property mit einem niedrigen Mindestabrufintervall (Settings.minimumFetchIntervalMillis) hinzufügen.

Das standardmäßige und empfohlene Abrufintervall für die Produktion für Remote Config beträgt 12 Stunden. Das bedeutet, dass Konfigurationen innerhalb von 12 Stunden nicht mehr als einmal vom Backend abgerufen werden, unabhängig davon, wie viele Abrufaufrufe tatsächlich erfolgen. Das Mindestabrufintervall wird in der folgenden Reihenfolge bestimmt:

1. Der Parameter in Settings.minimumFetchIntervalMillis.
2. Der Standardwert beträgt 12 Stunden.