Copied to Clipboard
Firebase Remote Config is a cloud service that lets you change the behavior and appearance of your app without requiring users to download an app update. When using Remote Config, you create in-app default values that control the behavior and appearance of your app. Then, you can later use the Firebase console or the Remote Config backend APIs to override in-app default values for all app users or for segments of your user base. Your app controls when updates are applied, and it can frequently check for updates and apply them with a negligible impact on performance.
There is a great introduction video about using Firebase that you can check below:
[フレーム]
How to use Firebase Remote Config for Feature Flags?
To be honest, it is a bit tricky :D
There are actually two ways of how you can use Firebase Remote Config to enable Feature Flags in your application -> In the Browser or on the Server.
The next sections of this article assume that you have already installed Firebase in your application. If you haven' t done so yet please refer to https://firebase.google.com/docs/web/setup#add-sdk-and-initialize.
Using Firebase Remote Config JS SDK (browser)
This is the easier approach that should be useful for smaller and less complex applications.
- Initialize the App
import { initializeApp } from "firebase/app";
import { getRemoteConfig } from "firebase/remote-config";
const firebaseConfig = { // config };
// Initialize Firebase
const app = initializeApp(firebaseConfig);
// Initialize Remote Config and get a reference to the service
const remoteConfig = getRemoteConfig(app);
- Set in app default values.
remoteConfig.defaultConfig = {
"new_feature": false
};
- Get value of flag
import { getValue } from "firebase/remote-config";
const val = getValue(remoteConfig, "new_feature");
- Fetch and activate
import { fetchAndActivate } from "firebase/remote-config";
fetchAndActivate(remoteConfig)
.then(() => {
// ...
})
.catch((err) => {
// ...
});
As I mentioned in the beginning, this solution should work well for a simple applications. Why? Because more complex apps can have more advanced needs like the ones mentioned below that this browser approach cannot solve:
- Firebase by default sets a throttling limit https://firebase.google.com/docs/remote-config/get-started?platform=web#throttling that disallows too many requests to fetch the data from Remote Config. This in general is a very good approach in web development to limit the amount of requests to not allow overloading of the service and making it unavailable. However, the problem here is that this remote config is supposed to be accessed many times (imagine that you have added a feature flag for a HeroBanner component that is on your homepage - every user accessing your website will be fetching Remote Config after each page reload).
- Firebase Remote Config JS SDK (browser version) caches the response received from Remote Config for each client in the browser. This means that each user accessing your website will have their own version of cached response from RC. You can try to disable this caching feature by setting:
remoteConfig.settings.minimumFetchIntervalMillis = 0; but then still you will encounter the problem mentioned in the first point (throttling) that will even throw an error for rate limiting. And this is indeed a problem as with solution such as this one, you should be able to invalidate cache globally so that each user accessing your website will get the most up to date remote config (otherwise some users could still see the staled content while others would be able to access the new content that would be really bad for User Experience).
But don't worry, there is a way to solve this issue and it is described in the next section :)
Using Firebase Admin to access Remote Config on the Server
This approach is a bit more difficult to implement but it enables feature flags in your application and solves the issues mentioned above.
- Initialize the admin app with
service-account.json
import admin from 'firebase-admin';
import { resolve } from 'path';
const pathToServiceAccount = resolve(__dirname, 'service-account.json');
admin.initializeApp({
credential: admin.credential.cert(pathToServiceAccount),
});
this.remoteConfig = admin.remoteConfig();
- Fetch the flags from Firebase RC on initial load of the application
const template = await remoteConfig.getTemplate();
let flags;
Object.keys(template.parameters).forEach((key) => {
flags[key] = template.parameters[key].defaultValue.value;
});
- Create two endpoints
1. One for fetching the flags that are stored in memory (cached)
2. Second for fetching the actual flags from Firebase RC and storing them in memory (remember to secure this endpoint with some kind of secret/apiKey to disallow unwanted invalidation or rate limiting to Firebase)
This solution would allow you to use Firebase Remote Config for Feature Flags, avoid being rate limited, and have one global cache that can be invalidated for all users easily.
Summary
As you have seen above, there are two ways of using Firebase Remote Config for Feature Flags. Depending on the use case the first one might not be available but second one should work for all scenarios. If you are developing a fullstack web application, I would definitely recommend the second one.
And about Firebase Remote Config in general, I really enjoy working with this tool. For now, we are using it for storing boolean values only, however, Remote Config allows us to store even numbers and string. Imagine what you can achieve with it ;)
See you next time and take care!