Improve accuracy in determining visibility state

src/_internal/types.ts

@@ -184,6 +184,11 @@ export interface PublicConfiguration<
    * @defaultValue false
    */
   refreshWhenOffline?: boolean
+  /**
+   * polling when the window is not focused (if `refreshInterval` is enabled)
+   * @defaultValue true
+   */
+  refreshWhenUnfocused?: boolean
   /**
    * automatically revalidate when window gets focused
    *
@@ -317,6 +322,11 @@ export interface PublicConfiguration<
    * @see {@link https://swr.vercel.app/docs/advanced/react-native#customize-focus-and-reconnect-events}
    */
   isVisible: () => boolean
+  /**
+   * hasFocus is a function that returns a boolean, to determine if the window has focus. Used for controlling polling behavior via refreshWhenUnfocused.
+   * @see {@link https://swr.vercel.app/docs/advanced/react-native#customize-focus-and-reconnect-events}
+   */
+  hasFocus: () => boolean
 }
 
 export type FullConfiguration<

src/_internal/utils/config.ts

@@ -60,6 +60,7 @@ export const defaultConfig: FullConfiguration = mergeObjects(
     revalidateOnReconnect: true,
     revalidateIfStale: true,
     shouldRetryOnError: true,
+    refreshWhenUnfocused: true,
 
     // timeouts
     errorRetryInterval: slowConnection ? 10000 : 5000,

src/_internal/utils/web-preset.ts

@@ -26,6 +26,16 @@ const isVisible = () => {
   return isUndefined(visibilityState) || visibilityState !== 'hidden'
 }
 
+const hasFocus = () => {
+  if (!isDocumentDefined) return true
+
+  try {
+    return typeof document.hasFocus === 'function' ? document.hasFocus() : true
+  } catch (err) {
+    return true
+  }
+}
+
 const initFocus = (callback: () => void) => {
   // focus revalidate
   if (isDocumentDefined) {
@@ -60,7 +70,8 @@ const initReconnect = (callback: () => void) => {
 
 export const preset = {
   isOnline,
-  isVisible
+  isVisible,
+  hasFocus
 } as const
 
 export const defaultConfigOptions: ProviderConfiguration = {

src/index/use-swr.ts

@@ -134,6 +134,7 @@
     refreshInterval,
     refreshWhenHidden,
     refreshWhenOffline,
+    refreshWhenUnfocused,
     keepPreviousData,
     strictServerPrefetchWarning
   } = config
@@ -299,7 +300,7 @@
 
   const data = isUndefined(cachedData)
     ? fallback && isPromiseLike(fallback)
       ? use(fallback)
       : fallback
     : cachedData
   const error = cached.error
@@ -670,7 +671,7 @@
         if (
           getConfig().revalidateOnFocus &&
           now > nextFocusRevalidatedAt &&
-          isActive()
+          getConfig().isOnline()
         ) {
           nextFocusRevalidatedAt = now + getConfig().focusThrottleInterval
           softRevalidate()
@@ -742,11 +743,12 @@
 
     function execute() {
       // Check if it's OK to execute:
-      // Only revalidate when the page is visible, online, and not errored.
+      // Only revalidate when the page is visible, online, focused, and not errored.
       if (
         !getCache().error &&
         (refreshWhenHidden || getConfig().isVisible()) &&
-        (refreshWhenOffline || getConfig().isOnline())
+        (refreshWhenOffline || getConfig().isOnline()) &&
+        (refreshWhenUnfocused || getConfig().hasFocus())
       ) {
         revalidate(WITH_DEDUPE).then(next)
       } else {
@@ -763,7 +765,13 @@
         timer = -1
       }
     }
-  }, [refreshInterval, refreshWhenHidden, refreshWhenOffline, key])
+  }, [
+    refreshInterval,
+    refreshWhenHidden,
+    refreshWhenOffline,
+    refreshWhenUnfocused,
+    key
+  ])
 
   // Display debug info in React DevTools.
   useDebugValue(returnedData)
@@ -791,7 +799,7 @@
 
     const mutateReq =
       !isUndefined(req) && hasKeyButNoData ? boundMutate(req) : resolvedUndef
     use(mutateReq)
 
     if (!isUndefined(error) && hasKeyButNoData) {
       throw error
@@ -805,7 +813,7 @@
       // @ts-ignore modify react promise value
       revalidation.value = true
     }
     use(revalidation)
   }
 
   const swrResponse: SWRResponse<Data, Error> = {

test/unit/web-preset-visible.test.ts

@@ -0,0 +1,32 @@
+import { preset } from '../../src/_internal/utils/web-preset'
+
+describe('web-preset isVisible', () => {
+  it('returns a boolean', () => {
+    expect(typeof preset.isVisible()).toBe('boolean')
+  })
+
+  it('checks document.visibilityState', () => {
+    // In a real browser, this would return true when visible
+    // In jsdom, it returns true by default
+    const result = preset.isVisible()
+    expect(typeof result).toBe('boolean')
+  })
+})
+
+describe('web-preset hasFocus', () => {
+  it('returns a boolean', () => {
+    expect(typeof preset.hasFocus()).toBe('boolean')
+  })
+
+  it('checks document.hasFocus()', () => {
+    // In jsdom, hasFocus() should be available on document
+    const result = preset.hasFocus()
+    expect(typeof result).toBe('boolean')
+  })
+
+  it('handles missing hasFocus gracefully', () => {
+    // hasFocus should return a boolean
+    const result = preset.hasFocus()
+    expect(typeof result).toBe('boolean')
+  })
+})