On iOS mobile: Back button throws out of the app to Shopify Admin (because it does not push to History)

marisveide commented 1 year ago

Describe the bug

On iOS mobile (Chrome and Safari): When pushing to History, then it actually does not push anything there. So when navigating back to (-1) inside the app from deeper page, then the effect is that the app user is just thrown out of the app to the Shopify Admin Home.

It works on desktop, and it works on Shopify mobile app.

To navigate forward, we call:

import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate(to, { state, replace });

To navigate back, we call:

import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate(-1);

To Reproduce

Steps to reproduce the behaviour:

Create a new Shopify bootstrap application, following your own tutorial: https://github.com/Shopify/shopify-app-template-ruby/blob/main/README.md
In index.jsx file change the following TitleBar logic to add a new action for the page:

import { useNavigate } from 'react-router-dom';
...
const navigate = useNavigate();
...
<TitleBar title="App name" primaryAction={{content: "Page Name", onAction: () => navigate('/pagename')}} />

Change the pagename.jsx to add an action to navigate back:

import { useNavigate } from 'react-router-dom';
...
const navigate = useNavigate();
...
      <TitleBar
        title="Page name"
        primaryAction={null}
        secondaryActions={[
          {
            content: "Back",
            onAction: () => navigate(-1),
          },
        ]}
      />

Run the app.
Open the Shopify Admin in mobile Chrome (or Safari) browser on iOS.
Navigate to the app.
Inside the app, tap on Page name action button.
Then press the secondary page action Back button on that page.
See that you are thrown out of the app, to the Shopify Admin Home page.

See the following video showing how it behaves: https://youtu.be/bMdBhnt5OE0

Expected behaviour

It should just navigate to the app home (previous page), not out of the app.

Contextual information

Packages and versions

@shopify/app-bridge @ ^3.1.0
@shopify/app-bridge-react @ ^3.1.0
@shopify/app-bridge-utils @ ^3.1.0
@shopify/polaris @ ^9.11.0
react-router-dom @ ^6.3.0

Platform

OS: iOS
OS Version: 15.6.1
App: Chrome and Safari

Additional context

It might be that iOS does not allow to access the History object for browsers, as it is not the real "link". Notice that using the side-menu pushes to the History, but using navigation actions does not push to the History. Using navigation from AppBridge NavigationMenu component the Back button does work as expected.

@itissible/matrixify

kaarelss commented 1 year ago

Having this issue aswell

tomriley commented 1 year ago

I'm also affected by this issue. It would be nice have a response from Shopify on whether this is actually a limitation (I suspect it is). I'm probably going to implement my own simple back and forward navigation bar at the top of my UI.

It's strange that there is no attempt at parity between the web browse-based embedded app user experience and the ios/android apps, especially with regard to navigation. I'm using the app-bridge's history.dispatch(History.Action.PUSH, url.pathname) so I expected that to enable navigation on ios/android, and also to allow navigation back into my app from an shopify admin page (e.g. order details page) that my user navigates to from my app. If you use the appbridge history API you get this functionality in the browser for free. It would be good to see the same thing in implemented on mobile.

Shopify / shopify-app-bridge