Shopify.navigation.navigate() is undefined in embedded app even though window.shopify exists (new CDN app-bridge.js)

Shopify Apps
, , , ,
1

Hi everyone,

We’re migrating from legacy App bridge v3 Redirect actions to the new APIs shown in the Shopify’s App Bridge migration guide, specially:
shopify.navigation.navigate(“/settings.html”);`

However, in our embedded Shopify Admin app, shopify.navigation.navigate is not available/undefined, even though window.shopify exists and other APIs work.

Our setup:
We are loading the new Shopify CDN App bridge runtime:
<script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>

Our app runs embedded inside Shopify Admin

What works?

These APIs work and are available in the window.shopify context:

  1. window.shopify.toast
  2. window.shopify.loading
  3. window.shopify.modal
  4. window.shopify.config
  5. window.shopify.idToken()

and other APIs except - window.shopify.navigation

window.shopify also prints a valid object and shows:

  • origin: “https://admin.shopify.com”
  • other config/app/environment values

But we cannot use:
shopify.navigation.navigate(“path”);

What we want to achieve:

We want to remove legacy App bridge v3 completely and avoid browser redirects like:

  • window.open
  • window.location.href

because these can cause issues inside the Shopify Mobile Admin App (Not sure if it would but better safe than sorry)

We only want to use Shopify-native embedded navigation.

Questions:

  1. Is shopify.navigation.navigate() supposed to be available for all embedded apps using the new CDN script?
  2. Are there an requirements for this API to be injected (admin surface, app type, permission, initialization steps etc)?
  3. If shopify.navigation.navigate() is not available, what is the recommended Shopify-native navigation approach (that works in Shopify Mobile Admin too)?

Thanks in advance!!

3

Hi, thanks for the suggestion.

We’re already including the required meta tags:

<meta name="shopify-api-key" content="SHOPIFY_API_KEY" />
<meta name="shopify-debug" content="web-vitals" />

and loading the CDN script early in <head>, but window.shopify.navigation is still undefined (while toast, loading, modal, config, and idToken() work fine).

Is there any other prerequisite for shopify.navigation.navigate() to be injected (specific admin surface, permissions, or additional setup)?

5

I’ve already tried many different solutions including solutions provided by many different LLMs already.
window.open is not working as expected as we are losing params from the redirected url and constructing a url with a params with a custom method is not really a good solution.. although we can do that but not actually a good way to solve this actual issue.