Shopify App Bridge - Different redirect behavior on Shopify iOS app and Shopify Admin in browser

[GerwinB]

The Shopify App Bridge seems to handle things differently in different environments.

The following redirect 

    const redirect = Redirect.create(appBridgeReact);
    redirect.dispatch(Redirect.Action.ADMIN_PATH, "/orders");

In the iOS Shopify App the redirect opens a modal with the orders list.

iOS Shopify App

The same code run in the Shopify Admin does a real redirect to the orders page in Shopify Admin.

Shopify Admin in bowser

Why is this happening?
How would I be able to detect the environment I'm in?

How can I do a real redirect in the iOS Shopify App?
This would be done right after specific action is complete in the app and the user should be sent to the overview page - not give him a modal. 

[iain-campbell]

Hi Gerwin,

This is the intended behaviour. Mobile UI doesn't have a way for users to navigate back after moving between sections. Loading orders in a modal on mobile allows the user to perform an action, with the possibility to return to the app.

What’s the workflow you want to be able to do on the orders page? If it's a specific action, it might make sense to build UI inside your app and use the Admin API to add/edit the order.

[GerwinB]

Hi,

Our workflow is:
- Users selects an order in the shopify admin

- more actions -> "create label" app action

- then we display a page in our app where the user can select options and create a pdf label
- X) when this is done we redirect to the admin orders page

So the step X) is not possible right now in the ios/android shopify app

[GerwinB]

@iain-campbell 

[iain-campbell]

Hi Gerwin,

I believe Shopify Mobile opens admin links ("more actions") in a new view on top of the same UI stack. On mobile, the user should be able to return to their previous location by tapping the 'back' button in the title bar.

As to your question about changing the app’s behaviour based on the host platform, we are working on exposing a utility for this. I’ll update this thread when it ships. In the meantime, you can check for 'Shopify Mobile' in the user agent.

[iain-campbell]

As of v1.22.0, isMobile should be available from the App Bridge Utils package (via npm: https://www.npmjs.com/package/@shopify/app-bridge-utils/, via cdn: https://unpkg.com/@shopify/app-bridge-utils). It’ll return true if the app is running on any of our mobile platforms (Shopify Mobile, Shopify POS, or Shopify Ping).