App Bridge App Window Issues: Header Flicker, Menu Button Bug, and Control Limitations

Built for Shopify
1

Hi everyone,

I’m building an app where I’ve been using App Bridge’s App Window for several use cases, but I’ve run into a few issues where the behavior doesn’t fully match the documentation.

  1. Header / Title Issues
    When assigning the App Window header using s-page with a heading, the App Window initially displays the app name (from nuxt.config or the Shopify app name), and then switches to the intended heading once the inner content loads. This only occurs on the first load.
  2. s-menu-button Issue (Mobile App)
    I’m using an s-menu-button in the App Window header.
    It works correctly on desktop, web, and mobile browsers. However, in the Shopify mobile app, the dropdown never opens, even though the button itself is visible.
  3. Closing the App Window
    I’d like to programmatically close the App Window on route changes, redirects, or based on certain conditions.
    The documentation suggests using:

document.getElementById('app-window').hide()

However, this doesn’t seem to work reliably in my case. Both document.getElementById('app-window') and document.querySelector('#app-window') return null, and the new route gets opened within the App Window instead of closing it.
As a workaround, I’m currently using a broadcast-based approach:


function navigateTo(path: string) {
  const channel = new BroadcastChannel('app-navigation')
  channel.postMessage({ type: 'navigate', to: path })
  channel.close()
}


onMounted(() => {
  const channel = new BroadcastChannel('app-navigation')

  channel.onmessage = async (event) => {
    if (event.data?.type === 'navigate') {
      const appWindow = document.getElementById('main-app-window') as any
      if (!appWindow) return // we're inside the iframe, ignore

      await appWindow.hide()
      router.push(event.data.to)
    }
  }

  onUnmounted(() => channel.close())
})

4. Save / Discard Functionality
The Save and Discard actions are not behaving as expected within the App Window.
I want to programmatically enable and disable the App Window’s save/discard bar. However, none of the approaches mentioned in the documentation seem to work inside the App Window, except for the <form data-save-bar> approach.
This method triggers the save/discard bar on input events, which I’ve had to manually dispatch programmatically as a workaround.