Please clarify how to get top frame's url via App Bridge

[AndreyZienko]

Can somebody explain to me how to get the current URL of the top frame?
I've connected App Bridge, and I am able to subscribe to changes of URL, but how to receive URL on the moment of launch? 

[JoeyF]

Hi @AndreyZienko 

Can somebody explain to me how to get the current URL of the top frame?

---

I don't think there's a super clean way to do it with App-Bridge.

One of the reasons is that App-Bridge is meant to allow your app to integrate well with the web version of Shopify Admin as well as Shopify Mobile (where there might not even be an iFrame).


If you need a workaround, all the information is available on the server side - When Shopify loads your app, it provides a host query-string parameter (which is just a base64 encoding of the top-window base URL). You could use the host, your app handle, and the path of the request to construct the full URL.

Workarounds aside, any chance you can share more details about your use-case? What are you trying to achieve?
App-Bridge is designed to abstract away this piece of information, and if there's something we missed with our design, I would love to better understand it.

[AndreyZienko]

Hi, Joef, thank you for your explanation. Of course, I know about the host, but I need to know the pathname. Something like myapp/products, myapp/page1, etc.

I need to know this products or page1.

Where do I use it? To connect extensions

I want to have more than 1 extension, so I need to know the URL on the moment of launch application. 

[JoeyF]

Thanks for the info, @AndreyZienko, this is super useful.

I tried to do what you described in one of my test apps, and it worked. Here is what I did:

I created a couple of Bulk Action Link extensions - One with Link target URL https://{MY_APP_SERVER}/page1, and the other with Link target URL https://{MY_APP_SERVER}/page2.

I went to the Product index page on my dev store, and tested these links.

When I clicked the first link,

1. My server loaded https://{MY_APP_SERVER}/page1?ids[]=... 
2. The App-Bridge library (on the frontend) recognized that the page isn't embedded
3. I was automatically redirected to https://{SHOPIFY_HOST}/{MY_APP_HANDLE}/page1?ids[]=...

(everything works similarly with page2, or any other pathname)

Are you seeing something different with your app? If so, where do things get stuck?

(Note: The automatic App-Bridge redirect happens because my app initializes App-Bridge with forceRedirect set to true)

[AndreyZienko]

so now I need just to receive on client-side : page1?ids[]=...
I know that I have it on the server side like host, but it is too far 🙂

[AndreyZienko]

Hi, Joef, thank you for explanation, about ids, I just found that at my Cloudflare worker, I need to add additional variable name