Remote Config
Firebase Remote Config: server-driven app config + experiments. Flags, defaults, conditions, and live A/B tests without redeploying.
Firebase — Remote Config
EXAMPLE
// ===== Why Remote Config =====
// - Feature flags (toggle features without redeploy)
// - A/B tests + experiments
// - Per-platform / per-version overrides
// - UI copy + colour rollouts
// - Per-segment behavior (country, audience, version)
// ===== Web SDK =====
import { getRemoteConfig, fetchAndActivate, getValue } from 'firebase/remote-config';
import { initializeApp } from 'firebase/app';
const app = initializeApp(firebaseConfig);
const rc = getRemoteConfig(app);
// Default values (used if no fetch yet):
rc.defaultConfig = {
showBanner: false,
primaryColor: '#2563eb',
greetingText: 'Hello',
maxItemsPerPage: 20,
};
// Fetch interval (don't hammer the server):
rc.settings.minimumFetchIntervalMillis = 3600 * 1000; // 1 hour
rc.settings.fetchTimeoutMillis = 60_000;
// Fetch + activate:
await fetchAndActivate(rc);
// Use:
const show = getValue(rc, 'showBanner').asBoolean();
const color = getValue(rc, 'primaryColor').asString();
const max = getValue(rc, 'maxItemsPerPage').asNumber();
// ===== Conditions (in console) =====
// Console -> Remote Config -> Add condition:
// - Country: AU, NZ
// - App version >= 1.5.0
// - User audience: 'beta_testers'
// - Platform: Web, iOS, Android
// - Random percentile: 0% - 10%
// Conditions stack; first-match wins.
// ===== Real-time updates (newer feature) =====
import { onConfigUpdate } from 'firebase/remote-config';
onConfigUpdate(rc, async (snapshot) => {
await snapshot.activate();
renderUI();
});
// Pushes updates to active clients without polling.
// ===== A/B testing =====
// Console -> A/B Testing -> Create experiment.
// Targets a Remote Config parameter; randomly assigns users to variants.
// Tracks an Analytics goal (purchase, retention, ...).
// Roll out winning variant to 100% after the experiment.
// ===== Server SDK (cloud functions / Node) =====
import { initializeApp } from 'firebase-admin/app';
import { getRemoteConfig } from 'firebase-admin/remote-config';
const app2 = initializeApp();
const template = await getRemoteConfig(app2).getTemplate();
// Read parameters, evaluate for a given user context...
// ===== Local fallbacks =====
// Always set defaults: if fetch fails, the app still works.
// Save the last activated config to local storage for offline fallback.
// ===== Patterns to internalise =====
// - Defaults defined in code AND in console (different defaults per env)
// - Short minimum fetch interval in dev; long (1h+) in prod
// - Pair Remote Config with Analytics for measurable experiments
// - Type each parameter; do not stuff JSON blobs unless really needed
// ===== Pitfalls =====
// - Fetching too often -> quota throttling
// - Mixing critical app logic with Remote Config flags (a bad rollout = bad app)
// - Reading values BEFORE activate() -> defaults only
// - Skipping defaults -> app crashes when offline + first launch
Why it matters
Remote Config is feature flags + experiments without redeploying. Define defaults in code, override via conditions in console, pair with Analytics for measurable rollouts. Long fetch interval in prod, short in dev, always-have-defaults for offline. Real-time updates make rollouts a single button click.
Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.
Example
Example
import { getRemoteConfig, fetchAndActivate, getString } from 'firebase/remote-config';
const rc = getRemoteConfig(app);
rc.settings.minimumFetchIntervalMillis = 60_000;
await fetchAndActivate(rc);
const banner = getString(rc, 'banner_text');
Try it Yourself »
Discussion
Loading…