I'm building a Shopify embedded app and need to detect when a user returns to my app after enabling an app embed block in the Theme Editor

Extensions
1

The flow:

  1. User is on my app’s homepage

  2. User clicks a link that opens the Theme Editor in a new tab (to enable an app embed)

  3. User enables the embed and returns to my app tab

  4. I want to automatically refresh the embed status without requiring a page refresh

What I’ve tried:

useEffect(() => {
  const handleVisibilityChange = () => {
    if (document.visibilityState === 'visible') {
      // Check embed status via GraphQL
      checkEmbedStatus()
    }
  }

  document.addEventListener('visibilitychange', handleVisibilityChange)

  return () => {
    document.removeEventListener('visibilitychange', handleVisibilityChange)
  }
}, [checkEmbedStatus])

The problem:

The visibilitychange event doesn’t seem to fire reliably when the app runs inside the Shopify Admin iframe. I’ve also tried window.addEventListener('focus', ...) but that doesn’t work either.

Questions:

  1. Is there a recommended way to detect tab/focus changes in embedded Shopify apps?

  2. Does App Bridge provide any hooks or events for this use case?

  3. Is polling the only reliable solution, or is there a better pattern?

Tech stack: Remix, React, Shopify App Bridge

2

Hi @Aswin_Ashok

Does App Bridge provide any hooks or events for this use case?

Unfortunately, not. After digging into things on my side, it doesn’t seem that there’s a dedicated API or event for detecting tab visibility changes or focus events. This is a known limitation with App Bridge currently.

Is polling the only reliable solution, or is there a better pattern?

It does look like polling would be the most reliable solution for this use case. For example you’d create a custom React hook that sets up an interval to poll your embed status API, while listening to DOM events tracking when the user was last active and only execute polls when recent activity is detected.