App bridge reloads app multiple times on first open

[quard8]

Describe the bug

I started debugging my LCP score and found out that app loading twice. Because of that all JS code started loading multiple times and I guess LCP score impacted.

I checked "Search and Discovery" app and found same behaviour. On app without App Bridge from CDN everything working as expected.

I found that App Bridge script send messages "APP::NAVIGATION::HISTORY::REPLACE" to host and looks like this is reason to reload entire app.

Code from minified script:

"./navigation.ts": ({protocol: t})=>{
            const n = self.navigation;
            function e(n, e) {
                if (!n)
                    return;
                const o = f(new URL(n,location.href))
                  , i = `${o.pathname}${o.search}${o.hash}`;
                l && t.send("Navigation.history." + e, {
                    path: i
                })
            }

l is always true because of l = window.name.startsWith("app-iframe")

To Reproduce

Steps to reproduce the behaviour:

1. Launch the "Search and Discovery" app
2. See network tab with multiple loads of the app

Expected behaviour

Embedded app loads once

Contextual information

Packages and versions

List the relevant packages you’re using, and their versions. For example:

• App Bridge from CDN

Platform

• OS: MacOS
• OS Version: OSX Sonoma 14.2.1
• App: Chrome, Safari

[expertvillagemed]

Hi quard8, I am facing the same issue. Did you get any solution for it? Please share here if you have any solution.

[kyakaze]

Yea we got this same issue, the app sends request twice, the first is cancelled, ~but our server already processes the request.~ . Actually when the app is pin in the list, shopify will automatically send request to all apps as if user is actually visit them, making our server handle the same request twice.

[wbelk]

I've debugged this as well. The Shopify admin is loading my app into three separate iframes, causing three requests to my index route each page reload

iframe[name="app-iframe"]
iframe[name="modal://content/classic"]
iframe[name="modal://content/max"]

To me this seems like a bug and inefficient, and makes my debugging much more difficult, what am I missing?

[trev0r]

Same issue here as well

[wbelk]

Yea we got this same issue, the app sends request twice, the first is cancelled, ~but our server already processes the request.~ . Actually when the app is pin in the list, shopify will automatically send request to all apps as if user is actually visit them, making our server handle the same request twice.

Yes I noticed this as well. I have 5 apps. If I'm on my dev shop it can be a nightmare.

[awd]

This seems to be especially problematic when opening the app from a nested link (think of a support tool or email to the merchant).

[TheSecurityDev]

Yea we got this same issue, the app sends request twice, the first is cancelled, ~but our server already processes the request.~ . Actually when the app is pin in the list, shopify will automatically send request to all apps as if user is actually visit them, making our server handle the same request twice.

I've noticed when this happens, it includes a prefetch=1 query parameter, so you can just ignore requests with that parameter in your server.

[henrytao-me]

Hi all, there are serval related issues here. I would like to summarize as below:

• There is always a CANCELED request on first load => This is confirmed a bug and we are fixing it. It should be merged today or tomorrow. => This shouldn't affect your WebVitals score.
• There is a prefetch=1 request when loading Admin => We are preloading top pinned apps in the background. However, it's turned off right now. => This shouldn't affect your WebVitals score.
• There are two additionally iframe for modals => This is gone now on production and you shouldn't see it. We were preloading two modal iframe for each app. So that it loads the modal content faster without showing the spinner. => This might affect your WebVitals score depending on your server load.

I will close this ticket once the canceled request is merged.