fix: ask canReload only when a reload is due, and reload builds found while hidden

The guard ran in checkVersion's default parameter, before the fetch and on
every poll, so its answer could be stale by the time a reload happened.
A check that resolved after the tab went to the background never reloaded,
because visibilitychange had already fired. Polling restarts only when
`duration` changes, since `auto` is read at check time.

Author: devmaxxx

src/ClearBrowserCacheBoundary.tsx

@@ -203,11 +203,7 @@ export class ClearBrowserCacheBoundary extends React.Component<
   }
 
   componentDidUpdate(prevProps: ClearBrowserCacheBoundaryProps) {
-    const { duration, auto } = this.props;
-    const pollingChanged =
-      duration !== prevProps.duration || auto !== prevProps.auto;
-
-    if (pollingChanged && document.hasFocus()) {
+    if (this.props.duration !== prevProps.duration && document.hasFocus()) {
       this.startVersionCheck();
     }
 
@@ -389,9 +385,20 @@ export class ClearBrowserCacheBoundary extends React.Component<
     }
   }
 
+  // The guard is asked only once a newer build is known, so it sees the page
+  // as it is at reload time and is not called on every poll.
+  unattendedReloadAllowed() {
+    const { auto, reloadWhenHidden } = this.props;
+    const wanted =
+      Boolean(auto) ||
+      (Boolean(reloadWhenHidden) && document.visibilityState === 'hidden');
+
+    return wanted && this.reloadAllowed();
+  }
+
   checkVersion = async ({
-    auto = (this.props.auto ?? false) && this.reloadAllowed()
-  } = {}): Promise<CheckResult> => {
+    auto
+  }: { auto?: boolean } = {}): Promise<CheckResult> => {
     this.lastCheckAt = Date.now();
 
     try {
@@ -404,7 +411,7 @@ export class ClearBrowserCacheBoundary extends React.Component<
 
       const isLatestVersion = latestVersion === this.appVersion;
 
-      if (!isLatestVersion && auto) {
+      if (!isLatestVersion && (auto ?? this.unattendedReloadAllowed())) {
         await this.clearCacheAndReload(latestVersion);
         return 'reloading';
       }

test/smoothUpdates.test.tsx

@@ -112,6 +112,22 @@ describe('reloadWhenHidden', () => {
     );
   });
 
+  it('reloads when a check finds a new build after the tab went hidden', async () => {
+    mockFetch(
+      () => metaResponse('v1'),
+      () => metaResponse('v2')
+    );
+
+    renderBoundary({ duration: 10, reloadWhenHidden: true });
+    await screen.findByTestId('isLatestVersion');
+    setVisibility('hidden');
+    fireEvent.focus(window);
+
+    await waitFor(() =>
+      expect(window.localStorage.getItem(STORAGE_KEY)).toBe('v2')
+    );
+  });
+
   it('leaves a current build alone', async () => {
     mockFetch(() => metaResponse('v1'));
     const caches = { keys: vi.fn(async () => []), delete: vi.fn() };
@@ -198,6 +214,17 @@ describe('canReload', () => {
     );
   });
 
+  it('does not ask the guard while the build is current', async () => {
+    mockFetch(() => metaResponse('v1'));
+    const canReload = vi.fn(() => true);
+
+    renderBoundary({ duration: 10, auto: true, canReload });
+    await screen.findByTestId('isLatestVersion');
+    await wait(40);
+
+    expect(canReload).not.toHaveBeenCalled();
+  });
+
   it('reloads once the guard allows it', async () => {
     mockFetch(
       () => metaResponse('v1'),