Fix bug in AsyncQueue visibility handler (#3586)

Author: schmidt-sebastian

.changeset/tidy-elephants-beam.md

@@ -0,0 +1,5 @@
+---
+"@firebase/firestore": patch
+---
+
+Fixed a bug that caused slow retries for IndexedDB operations even when a webpage re-entered the foreground.

packages/firestore/src/local/indexeddb_persistence.ts

@@ -294,8 +294,8 @@ export class IndexedDbPersistence implements Persistence {
     debugAssert(!this.started, 'IndexedDbPersistence double-started!');
     debugAssert(this.window !== null, "Expected 'window' to be defined");
 
-    // NOTE: This is expected to fail sometimes (in the case of another tab 
-    // already having the persistence lock), so it's the first thing we should 
+    // NOTE: This is expected to fail sometimes (in the case of another tab
+    // already having the persistence lock), so it's the first thing we should
     // do.
     return this.updateClientMetadataAndTryBecomePrimary()
       .then(() => {

packages/firestore/src/util/async_queue.ts

@@ -21,7 +21,7 @@ import { logDebug, logError } from './log';
 import { Deferred } from './promise';
 import { ExponentialBackoff } from '../remote/backoff';
 import { isIndexedDbTransactionError } from '../local/simple_db';
-import { getWindow } from '../platform/dom';
+import { getDocument } from '../platform/dom';
 
 const LOG_TAG = 'AsyncQueue';
 
@@ -235,12 +235,22 @@ export class AsyncQueue {
   // Visibility handler that triggers an immediate retry of all retryable
   // operations. Meant to speed up recovery when we regain file system access
   // after page comes into foreground.
-  private visibilityHandler = (): void => this.backoff.skipBackoff();
+  private visibilityHandler: () => void = () => {
+    const document = getDocument();
+    if (document) {
+      logDebug(
+        LOG_TAG,
+        'Visibility state changed to  ',
+        document.visibilityState
+      );
+    }
+    this.backoff.skipBackoff();
+  };
 
   constructor() {
-    const window = getWindow();
-    if (window && typeof window.addEventListener === 'function') {
-      window.addEventListener('visibilitychange', this.visibilityHandler);
+    const document = getDocument();
+    if (document && typeof document.addEventListener === 'function') {
+      document.addEventListener('visibilitychange', this.visibilityHandler);
     }
   }
 
@@ -293,9 +303,12 @@ export class AsyncQueue {
     this.verifyNotFailed();
     if (!this._isShuttingDown) {
       this._isShuttingDown = true;
-      const window = getWindow();
-      if (window) {
-        window.removeEventListener('visibilitychange', this.visibilityHandler);
+      const document = getDocument();
+      if (document && typeof document.removeEventListener === 'function') {
+        document.removeEventListener(
+          'visibilitychange',
+          this.visibilityHandler
+        );
       }
       await this.enqueueEvenAfterShutdown(op);
     }