Inizia a utilizzare Remote Config sul web

Puoi utilizzare Firebase Remote Config per definire i parametri nella tua app e aggiornarne i valori nel cloud, in modo da modificare l'aspetto e il comportamento dell'app senza distribuire un aggiornamento dell'app. Questa guida illustra i passaggi per iniziare e fornisce alcuni esempi di codice campione, tutti disponibili per la clonazione o il download dal repository GitHub firebase/quickstart-js.

Passaggio 1: aggiungi e inizializza l'SDK Remote Config

1. Se non l'hai già fatto, installa l'SDK Firebase JS e inizializza Firebase.

2. Aggiungi l'SDK JS Remote Config e inizializza 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();

Questo oggetto viene utilizzato per archiviare i valori dei parametri predefiniti in-app, recuperare i valori parametro aggiornati dal backend Remote Config e controllare quando i valori recuperati vengono resi disponibili per la tua app.

Passaggio 2: imposta l'intervallo di recupero minimo

Durante lo sviluppo, è consigliabile impostare un intervallo di recupero minimo relativamente basso. Per saperne di più, consulta Limitazione.

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

Passaggio 3: imposta i valori predefiniti dei parametri in-app

Puoi impostare i valori parametro predefiniti in-app nell'oggetto Remote Config, in modo che l'app si comporti come previsto prima di connettersi al backend Remote Config e che i valori predefiniti siano disponibili se non ne sono impostati nel backend.

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

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

Se hai già configurato i valori dei parametri di backend di Remote Config, puoi scaricare un file JSON generato che include tutti i valori predefiniti e includerlo nell'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

I seguenti esempi mostrano due modi diversi per importare e impostare i valori predefiniti nella tua app. Il primo esempio utilizza fetch, che effettuerà una richiesta HTTP al file dei valori predefiniti incluso nel bundle dell'app:

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

L'esempio successivo utilizza require, che compila i valori nell'app al momento della build:

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

Passaggio 4: ottieni i valori parametro da usare nell'app

Ora puoi ottenere i valori dei parametri dall'oggetto Remote Config. Se in un secondo momento imposti i valori nel backend, li recuperi e li attivi, questi valori saranno disponibili per la tua app.Per ottenere questi valori, chiama il metodo getValue(), fornendo la chiave del parametro come argomento.

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

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

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

Passaggio 5: imposta i valori parametro

Utilizzando la console Firebase o le API di backend Remote Config, puoi creare nuovi valori predefiniti lato server che eseguono l'override dei valori in-app in base alla logica condizionale o al targeting degli utenti che preferisci. Questa sezione illustra i passaggi della console Firebase per creare questi valori.

1. Nella console Firebase, vai alla pagina DevOps e coinvolgimento > Remote Config > Parametri.

2. Definisci i parametri con gli stessi nomi di quelli definiti nella tua app. Per ogni parametro, puoi impostare un valore predefinito (che alla fine sostituirà il valore predefinito in-app) e puoi anche impostare valori condizionali. Per scoprire di più, consulta Parametri e condizioni di Remote Config.

3. Se utilizzi le condizioni degli indicatori personalizzati, definisci gli attributi e i relativi valori. L'esempio seguente mostra come definire una condizione di indicatore personalizzato.

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

Passaggio 6: recupera e attiva i valori

1. Per recuperare i valori dei parametri dal backend Remote Config, chiama il metodo fetchConfig(). Tutti i valori impostati nel backend vengono recuperati e memorizzati nella cache nell'oggetto Remote Config.
2. Per rendere disponibili alla tua app i valori parametro recuperati, chiama il metodo activate().

Se vuoi recuperare e attivare i valori in un'unica chiamata, utilizza fetchAndActivate() come mostrato in questo esempio:

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

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

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

Poiché questi valori parametro aggiornati influiscono sul comportamento e sull'aspetto della tua app, devi attivare i valori recuperati in un momento che garantisca un'esperienza ottimale per l'utente, ad esempio la volta successiva che l'utente apre l'app. Per ulteriori informazioni ed esempi, consulta Strategie di caricamento di Remote Config.

Passaggio 7: ascolta gli aggiornamenti in tempo reale

Dopo aver recuperato i valori parametro, puoi utilizzare Remote Config in tempo reale per ascoltare gli aggiornamenti dal backend Remote Config. In tempo reale Remote Config segnala ai dispositivi connessi quando sono disponibili aggiornamenti e recupera automaticamente le modifiche dopo la pubblicazione di una nuova versione di Remote Config.

1. Nella tua app, utilizza onConfigUpdate per iniziare ad ascoltare gli aggiornamenti e recuperare automaticamente i nuovi valori parametro. Implementa il callback next per attivare la configurazione aggiornata.

     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. La prossima volta che pubblichi una nuova versione di Remote Config, i dispositivi che eseguono la tua app e ascoltano le modifiche chiameranno il gestore di completamento.

Limitazione

Se un'app esegue il recupero troppe volte in un breve periodo di tempo, le chiamate di recupero potrebbero essere limitate. In questi casi, l'SDK genera un errore FETCH_THROTTLE. Ti consigliamo di rilevare questo errore e riprovare in modalità di backoff esponenziale, attendendo intervalli più lunghi tra le richieste di recupero successive.

Durante lo sviluppo dell'app, potresti voler aggiornare la cache molto di frequente (molte volte all'ora) per consentirti di eseguire rapidamente l'iterazione durante lo sviluppo e il test dell'app. Per consentire un'iterazione rapida su un progetto con numerosi sviluppatori di app, puoi aggiungere temporaneamente una proprietà con un intervallo di recupero minimo basso (Settings.minimumFetchIntervalMillis) nella tua app.

L'intervallo di recupero di produzione predefinito e consigliato per Remote Config è di 12 ore, il che significa che le configurazioni non verranno recuperate dal backend più di una volta in un intervallo di 12 ore, indipendentemente dal numero di chiamate di recupero effettivamente effettuate. In particolare, l'intervallo di recupero minimo viene determinato nel seguente ordine:

1. Il parametro in Settings.minimumFetchIntervalMillis.
2. Il valore predefinito è 12 ore.