Added the page Visibility handler and stopRealtime

Author: Samruddhi90

packages/remote-config/src/client/realtime_handler.ts

@@ -21,6 +21,7 @@ import { ERROR_FACTORY, ErrorCode } from '../errors';
 import { _FirebaseInstallationsInternal } from '@firebase/installations';
 import { Storage } from '../storage/storage';
 import { calculateBackoffMillis, FirebaseError } from '@firebase/util';
+import { VisibilityMonitor } from '../../../database/src/core/util/VisibilityMonitor';
 
 export class RealtimeHandler {
   constructor(
@@ -31,7 +32,9 @@ export class RealtimeHandler {
     private readonly projectId: string,
     private readonly apiKey: string,
     private readonly appId: string
-  ) { }
+  ) { 
+      VisibilityMonitor.getInstance().on('visible', this.onVisibilityChange_, this);
+  }
 
   private streamController?: AbortController;
   private observers: Set<ConfigUpdateObserver> = new Set<ConfigUpdateObserver>();
@@ -110,6 +113,16 @@ export class RealtimeHandler {
     return false;
   }
 
+  private stopRealtime(): void {
+    console.log("page Visibility changes: connection aborted");
+      if (this.scheduledConnectionTimeoutId) {
+          clearTimeout(this.scheduledConnectionTimeoutId);
+          this.scheduledConnectionTimeoutId = undefined;
+      }
+      this.streamController?.abort();
+      this.isConnectionActive = false;
+  }
+
   private resetRetryCount(): void {
     this.retriesRemaining = ORIGINAL_RETRIES;
   }
@@ -147,8 +160,10 @@ export class RealtimeHandler {
       this.retryHttpConnectionWhenBackoffEnds();
       return;
     }
+  
     let response;
     try {
+      console.log("into try");
       const [installationId, installationTokenResult] = await Promise.all([
         this.firebaseInstallations.getId(),
         this.firebaseInstallations.getToken(false)
@@ -159,7 +174,6 @@ export class RealtimeHandler {
         'If-None-Match': '*',
         'authentication-token': installationTokenResult
       };
-
       const url = this.getRealtimeUrl();
       const requestBody = {
         project: this.projectId,
@@ -176,6 +190,7 @@ export class RealtimeHandler {
         body: JSON.stringify(requestBody)
       });
       if (response.status === 200 && response.body) {
+        console.log("got the response");
         this.resetRetryCount();
         this.resetRealtimeBackoff();
         //code related to start StartAutofetch
@@ -200,7 +215,8 @@ export class RealtimeHandler {
       }
 
       if (connectionFailed || statusCode === 200) {
-        this.retryHttpConnectionWhenBackoffEnds();
+        console.log("again");
+       // this.retryHttpConnectionWhenBackoffEnds();
       } else {
         //still have to implement this part
         let errorMessage = `Unable to connect to the server. Try again in a few minutes. HTTP status code: ${statusCode}`;
@@ -257,4 +273,21 @@ export class RealtimeHandler {
     return new URL(urlString);
   }
 
+    private onVisibilityChange_(visible: unknown) {
+      console.log("inside2");
+        const wasInBackground = this.isInBackground;
+        this.isInBackground = !visible;
+
+        if (wasInBackground !== this.isInBackground) {
+            if (this.isInBackground) {
+                // The page just became hidden.
+                console.log("stopoping because of backgrouhnd");
+                this.stopRealtime();
+            } else {
+                console.log("starting because of foreground");
+                // The page just became visible.
+                this.beginRealtime();
+            }
+        }
+    }
 }

packages/remote-config/tsconfig.json

@@ -2,6 +2,7 @@
   "extends": "../../config/tsconfig.base.json",
   "compilerOptions": {
     "outDir": "dist",
+    "strict": false,
     "resolveJsonModule": true
   },
   "exclude": ["dist/**/*"]