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, consentendoti di 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, tutti disponibili per il clone 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'Remote Config JS SDK 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 dei parametri aggiornati dal backend Remote Confige controllare quando i valori recuperati vengono resi disponibili per l'app.

Passaggio 2: imposta l'intervallo minimo di recupero

Durante lo sviluppo, ti consigliamo di impostare un intervallo minimo di recupero relativamente basso. Per ulteriori informazioni, consulta Limitazione per ulteriori informazioni.

// 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 dei parametri predefiniti in-app

Puoi impostare i valori dei parametri predefiniti in-app nell'Remote Config oggetto, in modo che l'app si comporti come previsto prima di connettersi al Remote Config backend e che i valori predefiniti siano disponibili se non ne è stato impostato nessuno 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 del backend 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

Gli esempi seguenti 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 predefinito incluso nell'app bundle:

  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 in fase di compilazione:

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

Passaggio 4: ottieni i valori dei parametri da utilizzare 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 sono disponibili per la tua app.Per ottenere questi valori, chiama il getValue() metodo, 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 dei parametri

Utilizzando la Firebase console o le Remote Config backend API, puoi creare nuovi valori predefiniti lato server che sostituiscono i valori in-app in base alla logica condizionale o al targeting utente desiderati. Questa sezione illustra i passaggi della console Firebase per creare questi valori.

1. Nella Firebase console, apri il progetto.
2. Seleziona Remote Config dal menu per visualizzare la Remote Config dashboard.
3. Definisci i parametri con gli stessi nomi dei parametri definiti nell'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 Remote Config Parametri e Condizioni.

4. Se utilizzi condizioni di segnale personalizzate, definisci gli attributi e i relativi valori. L'esempio seguente mostra come definire una condizione di segnale personalizzata.

     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 Remote Config backend, chiama il fetchConfig() metodo. Tutti i valori impostati nel backend vengono recuperati e memorizzati nella cache nell' Remote Config oggetto.
2. Per rendere disponibili i valori dei parametri recuperati per la tua app, chiama il activate() metodo.

Se vuoi recuperare e attivare i valori in una sola 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 dei parametri aggiornati influiscono sul comportamento e sull'aspetto di l'app, devi attivare i valori recuperati in un momento che garantisca un'esperienza fluida 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 dei parametri, puoi utilizzare Remote Config per ascoltare gli aggiornamenti dal backend Remote Config. Real-time Remote Config segnala ai dispositivi connessi quando sono disponibili aggiornamenti e recupera automaticamente le modifiche dopo aver pubblicato una nuova Remote Config versione.

1. Nella tua app, utilizza onConfigUpdate per iniziare ad ascoltare gli aggiornamenti e recuperare automaticamente tutti i nuovi valori dei parametri. 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 volta successiva 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 recupera 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 intercettare questo errore e di 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 spesso (molte volte all'ora) per poter eseguire rapidamente l'iterazione durante lo sviluppo e il test dell'app. Per consentire un'iterazione rapida su un progetto con numerosi sviluppatori, puoi aggiungere temporaneamente una proprietà con un intervallo minimo di recupero 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 periodo di 12 ore, indipendentemente dal numero di chiamate di recupero effettivamente effettuate. In particolare, l'intervallo minimo di recupero viene determinato nel seguente ordine:

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