Pierwsze kroki ze Zdalną konfiguracją w aplikacjach internetowych

Za pomocą Firebase Remote Config możesz definiować parametry w aplikacji i aktualizować ich wartości w chmurze, co pozwala modyfikować wygląd i działanie aplikacji bez konieczności rozpowszechniania aktualizacji aplikacji. W tym przewodniku znajdziesz instrukcje, jak zacząć, oraz przykładowy kod, który możesz sklonować lub pobrać z repozytorium firebase/quickstart-js na GitHubie.

Krok 1. Dodaj i zainicjuj pakiet SDK Remote Config

1. Zainstaluj pakiet Firebase JS SDK i zainicjuj Firebase, jeśli nie korzystasz jeszcze z tej usługi.

2. Dodaj pakiet SDK Remote Config JS i zainicjuj 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();

Ten obiekt służy do przechowywania domyślnych wartości parametrów w aplikacji, pobierania zaktualizowanych wartości parametrów z backendu Remote Config i kontrolowania, kiedy pobrane wartości są udostępniane aplikacji.

Krok 2. Ustaw minimalny interwał pobierania

Podczas programowania zalecamy ustawienie stosunkowo krótkiego minimalnego interwału pobierania. Więcej informacji znajdziesz w sekcji Ograniczanie.

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

Krok 3. Ustaw domyślne wartości parametrów w aplikacji

Możesz ustawić domyślne wartości parametrów w aplikacji w obiekcie Remote Config, aby aplikacja działała zgodnie z oczekiwaniami, zanim połączy się z backendem Remote Config, oraz aby wartości domyślne były dostępne, jeśli nie zostały ustawione w backendzie.

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

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

Jeśli masz już skonfigurowane wartości parametrów backendu Remote Config, możesz pobrać wygenerowany plik JSON, który zawiera wszystkie wartości domyślne, i dołączyć go do pakietu aplikacji:

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

Poniższe przykłady pokazują 2 różne sposoby importowania i ustawiania wartości domyślnych w aplikacji. Pierwszy przykład używa fetch, który wysyła żądanie HTTP do pliku wartości domyślnych zawartego w pakiecie aplikacji:

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

W następnym przykładzie użyto require, który kompiluje wartości w aplikacji podczas kompilacji:

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

Krok 4. Uzyskaj wartości parametrów, które będą używane w Twojej aplikacji

Teraz możesz pobierać wartości parametrów z obiektu Remote Config. Jeśli później ustawisz wartości w backendzie, pobierzesz je, a następnie aktywujesz, będą one dostępne dla aplikacji.Aby je uzyskać, wywołaj metodę getValue(), podając klucz parametru jako argument.

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

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

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

Krok 5. Ustaw wartości parametrów

Za pomocą konsoli Firebase lub interfejsów API backendu Remote Config możesz tworzyć nowe wartości domyślne po stronie serwera, które zastępują wartości w aplikacji zgodnie z wybraną logiką warunkową lub kierowaniem na użytkowników. W tej sekcji znajdziesz instrukcje tworzenia tych wartości w konsoli Firebase.

1. W konsoli Firebase otwórz stronę DevOps i zaangażowanie > Zdalna konfiguracja > Parametry.

2. Zdefiniuj parametry o takich samych nazwach jak parametry zdefiniowane w aplikacji. Dla każdego parametru możesz ustawić wartość domyślną (która ostatecznie zastąpi wartość domyślną w aplikacji) oraz wartości warunkowe. Więcej informacji znajdziesz w artykule Parametry i warunki Remote Config.

3. Jeśli używasz warunków sygnałów niestandardowych, zdefiniuj atrybuty i ich wartości. Poniższy przykład pokazuje, jak zdefiniować warunek sygnału niestandardowego.

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

Krok 6. Pobierz i aktywuj wartości

1. Aby pobrać wartości parametrów z backendu Remote Config, wywołaj metodę fetchConfig(). Wszystkie wartości ustawione w backendzie są pobierane i buforowane w obiekcie Remote Config.
2. Aby pobrane wartości parametrów były dostępne dla aplikacji, wywołaj metodę activate().

Jeśli chcesz pobrać i aktywować wartości w jednym wywołaniu, użyj fetchAndActivate(), jak pokazano w tym przykładzie:

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

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

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

Zaktualizowane wartości parametrów wpływają na zachowanie i wygląd aplikacji, dlatego należy je aktywować w momencie, który zapewni użytkownikowi płynne działanie aplikacji, np. przy następnym jej otwarciu. Więcej informacji i przykłady znajdziesz w artykule o strategiach wczytywania Zdalnej konfiguracji.

Krok 7. Słuchaj aktualizacji w czasie rzeczywistym

Po pobraniu wartości parametrów możesz używać Remote Config w czasie rzeczywistym, aby nasłuchiwać aktualizacji z backendu Remote Config. Remote Config wysyła sygnały do połączonych urządzeń w czasie rzeczywistym, gdy dostępne są aktualizacje, i automatycznie pobiera zmiany po opublikowaniu nowej wersji Remote Config.

1. W aplikacji użyj metody onConfigUpdate, aby zacząć nasłuchiwać aktualizacji i automatycznie pobierać nowe wartości parametrów. Zaimplementuj wywołanie zwrotne next, aby aktywować zaktualizowaną konfigurację.

     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. Gdy następnym razem opublikujesz nową wersję Remote Config, urządzenia, na których działa Twoja aplikacja i które nasłuchują zmian, wywołają moduł obsługi zakończenia.

Ograniczenia

Jeśli aplikacja pobiera dane zbyt wiele razy w krótkim czasie, wywołania pobierania mogą zostać ograniczone. W takich przypadkach pakiet SDK zgłasza błąd FETCH_THROTTLE. Zalecamy przechwycenie tego błędu i ponowienie próby w trybie wzrastającego czasu do ponowienia, czyli z coraz dłuższymi przerwami między kolejnymi żądaniami pobrania.

Podczas tworzenia aplikacji możesz bardzo często odświeżać pamięć podręczną (wiele razy na godzinę), aby szybko wprowadzać zmiany podczas tworzenia i testowania aplikacji. Aby umożliwić szybkie wprowadzanie zmian w projekcie, nad którym pracuje wielu deweloperów aplikacji, możesz tymczasowo dodać w aplikacji właściwość z krótkim minimalnym interwałem pobierania (Settings.minimumFetchIntervalMillis).

Domyślny i zalecany interwał pobierania w środowisku produkcyjnym dla Remote Config wynosi 12 godzin, co oznacza, że konfiguracje nie będą pobierane z backendu częściej niż raz na 12 godzin, niezależnie od tego, ile wywołań pobierania zostanie faktycznie wykonanych. Minimalny interwał pobierania jest określany w następującej kolejności:

1. Parametr w Settings.minimumFetchIntervalMillis.
2. Wartość domyślna to 12 godzin.