Implement Realtime Autofetch on Config Update Notifications (#9206)

Adds logic to listen for realtime update notifications. When a new template version is detected, it automatically fetches the config. After a successful fetch, a callback is triggered to notify the app that a new config version has been retrieved and is ready to be activated.

Author: Samruddhi90

.changeset/lemon-baboons-lick.md

@@ -0,0 +1,7 @@
+---
+'@firebase/remote-config': minor
+'firebase': minor
+'@firebase/remote-config-types': minor
+---
+
+Added support for Realtime Remote Config for the web. This feature introduces a new `onConfigUpdate` API and allows web applications to receive near-instant configuration updates without requiring periodic polling.

common/api-review/remote-config.api.md

@@ -42,11 +42,15 @@ export interface FetchResponse {
     config?: FirebaseRemoteConfigObject;
     eTag?: string;
     status: number;
+    templateVersion?: number;
 }
 
 // @public
 export type FetchStatus = 'no-fetch-yet' | 'success' | 'failure' | 'throttle';
 
+// @public
+export type FetchType = 'BASE' | 'REALTIME';
+
 // @public
 export interface FirebaseRemoteConfigObject {
     // (undocumented)
@@ -78,7 +82,7 @@ export function isSupported(): Promise<boolean>;
 export type LogLevel = 'debug' | 'error' | 'silent';
 
 // @public
-export function onConfigUpdate(remoteConfig: RemoteConfig, observer: ConfigUpdateObserver): Promise<Unsubscribe>;
+export function onConfigUpdate(remoteConfig: RemoteConfig, observer: ConfigUpdateObserver): Unsubscribe;
 
 // @public
 export interface RemoteConfig {

docs-devsite/remote-config.fetchresponse.md

@@ -27,6 +27,7 @@ export interface FetchResponse
 |  [config](./remote-config.fetchresponse.md#fetchresponseconfig) | [FirebaseRemoteConfigObject](./remote-config.firebaseremoteconfigobject.md#firebaseremoteconfigobject_interface) | Defines the map of parameters returned as "entries" in the fetch response body.<p>Only defined for 200 responses. |
 |  [eTag](./remote-config.fetchresponse.md#fetchresponseetag) | string | Defines the ETag response header value.<p>Only defined for 200 and 304 responses. |
 |  [status](./remote-config.fetchresponse.md#fetchresponsestatus) | number | The HTTP status, which is useful for differentiating success responses with data from those without.<p>The Remote Config client is modeled after the native <code>Fetch</code> interface, so HTTP status is first-class.<p>Disambiguation: the fetch response returns a legacy "state" value that is redundant with the HTTP status code. The former is normalized into the latter. |
+|  [templateVersion](./remote-config.fetchresponse.md#fetchresponsetemplateversion) | number | The version number of the config template fetched from the server. |
 
 ## FetchResponse.config
 
@@ -65,3 +66,13 @@ The HTTP status, which is useful for differentiating success responses with data
 ```typescript
 status: number;
 ```
+
+## FetchResponse.templateVersion
+
+The version number of the config template fetched from the server.
+
+<b>Signature:</b>
+
+```typescript
+templateVersion?: number;
+```

docs-devsite/remote-config.md

@@ -53,6 +53,7 @@ The Firebase Remote Config Web SDK. This SDK does not work in a Node.js environm
 |  Type Alias | Description |
 |  --- | --- |
 |  [FetchStatus](./remote-config.md#fetchstatus) | Summarizes the outcome of the last attempt to fetch config from the Firebase Remote Config server.<ul> <li>"no-fetch-yet" indicates the [RemoteConfig](./remote-config.remoteconfig.md#remoteconfig_interface) instance has not yet attempted to fetch config, or that SDK initialization is incomplete.</li> <li>"success" indicates the last attempt succeeded.</li> <li>"failure" indicates the last attempt failed.</li> <li>"throttle" indicates the last attempt was rate-limited.</li> </ul> |
+|  [FetchType](./remote-config.md#fetchtype) | Indicates the type of fetch request.<ul> <li>"BASE" indicates a standard fetch request.</li> <li>"REALTIME" indicates a fetch request triggered by a real-time update.</li> </ul> |
 |  [LogLevel](./remote-config.md#loglevel) | Defines levels of Remote Config logging. |
 |  [Unsubscribe](./remote-config.md#unsubscribe) | A function that unsubscribes from a real-time event stream. |
 |  [ValueSource](./remote-config.md#valuesource) | Indicates the source of a value.<ul> <li>"static" indicates the value was defined by a static constant.</li> <li>"default" indicates the value was defined by default config.</li> <li>"remote" indicates the value was defined by fetched config.</li> </ul> |
@@ -295,7 +296,7 @@ Starts listening for real-time config updates from the Remote Config backend and
 <b>Signature:</b>
 
 ```typescript
-export declare function onConfigUpdate(remoteConfig: RemoteConfig, observer: ConfigUpdateObserver): Promise<Unsubscribe>;
+export declare function onConfigUpdate(remoteConfig: RemoteConfig, observer: ConfigUpdateObserver): Unsubscribe;
 ```
 
 #### Parameters
@@ -307,7 +308,7 @@ export declare function onConfigUpdate(remoteConfig: RemoteConfig, observer: Con
 
 <b>Returns:</b>
 
-Promise&lt;[Unsubscribe](./remote-config.md#unsubscribe)<!-- -->&gt;
+[Unsubscribe](./remote-config.md#unsubscribe)
 
 An [Unsubscribe](./remote-config.md#unsubscribe) function to remove the listener.
 
@@ -384,6 +385,18 @@ Summarizes the outcome of the last attempt to fetch config from the Firebase Rem
 export type FetchStatus = 'no-fetch-yet' | 'success' | 'failure' | 'throttle';
 ```
 
+## FetchType
+
+Indicates the type of fetch request.
+
+<ul> <li>"BASE" indicates a standard fetch request.</li> <li>"REALTIME" indicates a fetch request triggered by a real-time update.</li> </ul>
+
+<b>Signature:</b>
+
+```typescript
+export type FetchType = 'BASE' | 'REALTIME';
+```
+
 ## LogLevel
 
 Defines levels of Remote Config logging.

packages/remote-config/src/api.ts

@@ -68,6 +68,9 @@ export function getRemoteConfig(
     rc._initializePromise = Promise.all([
       rc._storage.setLastSuccessfulFetchResponse(options.initialFetchResponse),
       rc._storage.setActiveConfigEtag(options.initialFetchResponse?.eTag || ''),
+      rc._storage.setActiveConfigTemplateVersion(
+        options.initialFetchResponse.templateVersion || 0
+      ),
       rc._storageCache.setLastSuccessfulFetchTimestampMillis(Date.now()),
       rc._storageCache.setLastFetchStatus('success'),
       rc._storageCache.setActiveConfig(
@@ -100,6 +103,7 @@ export async function activate(remoteConfig: RemoteConfig): Promise<boolean> {
     !lastSuccessfulFetchResponse ||
     !lastSuccessfulFetchResponse.config ||
     !lastSuccessfulFetchResponse.eTag ||
+    !lastSuccessfulFetchResponse.templateVersion ||
     lastSuccessfulFetchResponse.eTag === activeConfigEtag
   ) {
     // Either there is no successful fetched config, or is the same as current active
@@ -108,7 +112,10 @@ export async function activate(remoteConfig: RemoteConfig): Promise<boolean> {
   }
   await Promise.all([
     rc._storageCache.setActiveConfig(lastSuccessfulFetchResponse.config),
-    rc._storage.setActiveConfigEtag(lastSuccessfulFetchResponse.eTag)
+    rc._storage.setActiveConfigEtag(lastSuccessfulFetchResponse.eTag),
+    rc._storage.setActiveConfigTemplateVersion(
+      lastSuccessfulFetchResponse.templateVersion
+    )
   ]);
   return true;
 }
@@ -369,12 +376,12 @@ export async function setCustomSignals(
  *
  * @public
  */
-export async function onConfigUpdate(
+export function onConfigUpdate(
   remoteConfig: RemoteConfig,
   observer: ConfigUpdateObserver
-): Promise<Unsubscribe> {
+): Unsubscribe {
   const rc = getModularInstance(remoteConfig) as RemoteConfigImpl;
-  await rc._realtimeHandler.addObserver(observer);
+  rc._realtimeHandler.addObserver(observer);
   return () => {
     rc._realtimeHandler.removeObserver(observer);
   };