Is Browser's Back button broken with App Bridge?

Highlighted
Shopify Partner
26 1 5

I'm doing an embedded, Single-Page Application, Polaris, React. I'm using the react router. Now I'm trying to integrate with App Bridge and breadcrumbs and titlebar and all.

 

As I'm not sure exactly how App Bridge works (the documentation is very templatey, carelessly copy-pasted without re-reading), I'm starting with a very simple thing. I have a button which aims to take user to another page without a full page reload. I am doing two things:

 

1) pushing the relative path to react router's history instance: history.push(relativePath)
2) updating App Bridge's history: embHistory.dispatch(History.Action.PUSH, relativePath)

 

This works - I get the page content loaded, it's not a full reload, great. Browser address bar shows the new url, great. But, when I hit browser's back button the following happens:

 

1) title bar gets updated (I can see visually),
2) address bar gets updated
3) full page reload starts!

 

The third step is not expected.

I have subscribed to both react router's history and app's actions and app's history actions and app's redirect actions ("Emb" is just a prefix I use for AppBridge imports, ignore it):

 

this.app.subscribe((data) => {
console.log("App action", data)
});

this.embRedirect = EmbRedirect.create(this.app);
this.embRedirect.subscribe(EmbRedirect.Action.APP, (payload) => {
console.log("Redirect APP action", payload);
});
this.embRedirect.subscribe(EmbRedirect.Action.REMOTE, (payload) => {
console.log("Redirect REMOTE action", payload);
});
this.embRedirect.subscribe(EmbRedirect.Action.ADMIN_PATH, (payload) => {
console.log("Redirect ADMIN_PATH action", payload);
});
this.embRedirect.subscribe(EmbRedirect.Action.ADMIN_SECTION, (payload) => {
console.log("Redirect ADMIN_SECTION action", payload);
});

this.embHistory = EmbHistory.create(this.app);
this.embHistory.subscribe(EmbHistory.Action.PUSH, (data) => {
console.log("History PUSH action", data);
});
this.embHistory.subscribe(EmbHistory.Action.REPLACE, (data) => {
console.log("History REPLACE action", data);
});

Here's what I see upon hitting the back button:

- NOTHING

 

What I am doing wrong? Is there a bug in App Bridge in that it doesn't listen to the history POP in the main window correctly? Or does it depend on some App Provider setting?
There are no errors in the console, by the way (apart from 404 https://v.shopify.com/last_shop?shop=myshop.myshopify.com which I believe is inconsequential).

 

When I test the same code in a standalone application, the react router is notified of the history POP event as expected.

 

Are users not expected to hit Back button?

0 Likes
Shopify Partner
26 1 5

Ignore the above. I have created a github issue: https://github.com/Shopify/polaris-react/issues/998

 

In the end the issue is just that in an embedded app, the name of the app in the top bar is a link that causes full iframe reload which is undesirable and unnecessary in my single page application. I am wondering if it's an AppBridge bug or it is by design.

0 Likes