Shopify App Bridge

Shayne
Shopify Staff
203 9 47

App Bridge rollout meter : 100%

Revised Launch Date : Thursday, November 8th, 2018.


We’re excited to announce that we're launching a new way for apps and channels to be embedded directly into the Shopify admin, including Shopify mobile and POS. This new library is called Shopify App Bridge. This consolidated tooling brings together the functionality previously provided by the Embedded App SDK and the POS App SDK and makes building and testing embedded apps easier through:

  • Modern development workflows (npm, TypeScript support, and more!)

  • Support for Redux DevTools

  • More and better error reporting

  • Strict versioning using semver

 

This update is currently being rolled-out to all current consumers of the EASDK, and since it’s backwards compatible, no new work is needed to get it set-up. It’ll also be available as open source on GitHub soon as well.

The titlebar has had a much needed redesign, adding extra space for future features and separating primary actions from secondary (screenshot below).

Embedded apps using App Bridge will also be able to access a new navigation menu builder, available as a new app extension in the Partners dashboard.

These improvements will help cut down your development time and ensure your app renders consistently across platforms—desktop, mobile, and Shopify POS.

For more information, please check out the docs here.

EDIT: 
Some people have been emailing in asking about the why of these changes, specifically the change to the title bar structure. 

We're working towards a future that includes more titlebar actions, with deeper, more extensible connections into the product. Offering support, leaving reviews, and a ton of other ideas are on the table. The old title bar just didn't give enough space to offer the kind of improvements that we're working on, so it made sense to release it with App Bridge.

The only method that was removed was ShopifyApp.Modal.input, due to it's exceptionally low use (only 77 total clients). In it's place, iFrame Modals can be used,

We're always looking for feedback; post it in the forums, or email us and we can set up a call — we're happy to talk about the future of the platform and want to make sure your voice is heard.

Shayne | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

Replies 77 (77)
Seller_Panda
Shopify Partner
45 0 9

@AlexDover this is what the titleBar is for: https://help.shopify.com/en/api/embedded-apps/app-bridge/actions/titlebar

 

 

Alex_Dover_-_Un
Shopify Partner
2 0 0

Thanks, I will take a further look. The TtitleBar just looks like it covers buttons and breadcrumbs - I was hoping to be able to control the new navigation items in code rather than via the partner dashboard (https://help.shopify.com/en/api/embedded-apps/app-extensions/navigation/create-navigation-link)

Seller_Panda
Shopify Partner
45 0 9

Yes, the titlebar buttons ARE the navigation items, you can simply delete all button from the navigation menu and do it via the code with app bridge (if its working).

bolle
Excursionist
24 1 5

My app lives at /

I want to create a navigation link via the Partner dashboard that directs the customer to /

It doesn't let me do this for whatever reason.
Is this possible to implement?

Thanks.

Bjorn_Forsberg_
Shopify Partner
279 4 56

Edit: I worked out how to reproduce the bad behaviour, steps added below

Hey Shayne,

Found what I think is a bug, in the way the new navigation menu items work. The issue is that query string parameters from the initial load of the app, are sometimes passed to future navigations using the menu links.

Example: I load up my app by using an admin link on the Shopify admin -> Orders page, by selecting 50 orders and clicking "Bulk actions" -->> "Load in app xxxx".

That link points to /orders and appends the selected ids, so the final url that comes to my app is /orders?ids[]=xxxxxxx&ids[]=yyyyyy etc, all is fine with that.

However, if after arriving on the /orders?ids[]=xxxxxxx&ids[]=yyyyyy page, I reload the page (Cmd+R) and then click on another menu item, the App Bridge keeps the ids[] and anything else in the query string.. when sending the request to the new page. So I end up with /draft_orders?ids[]=xxxxxxx&ids[]=yyyyyy which of course breaks things as those are order ids and not draft order ids.

How can I make sure that the App Bridge calls the navigation item links exactly as they are setup, and does not append previous query string parameters, even if the page is reloaded? I don't think I can do anything to stop it, as the navigation items are controlled by Shopify.

Reproduction steps:

1. Load the app using a bulk action from the Shopify admin, for example from the orders page
2. Reload the full page, this brings you back to exactly the same page as before, and includes the original query string params. All ok.
3. Click another navigation item, it now has the original query string parameters. Not ok.

Any help you can give would be much appreciated!

Have a great Friday!

Bjorn

Bjorn Forsberg | FORSBERG+two | Award-winning Shopify Apps since 2011
HunkyBill
Shopify Expert
4615 54 532

There have been URL problems forever with the way Shopify stages links. You are lucky the ids are formatted correctly as ids[]=xxxxxx as for a while there they were all formatted as ids[][]=xxxxxx which pooched any Apps dealing with that. I noticed due to using Rails too, that we had to override the EASDK URL handling in terms of browser history (seems to be your issue too), as it was never in sync with reality. Was a hack job to fix that with some Jabvascript.

So ya. Go Shopify go! It takes years to get things right in this complex domain, and that is without constantly churning through internal technology stacks and design idea changes. So far, we are getting just glimpses of what it all may end up being.

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
JoshHighland
Shopify Expert
76 2 38

I have a POS app in the app store. I'm migration from the POS SDK to App Bridge but I'm seeing some strange behavior. Is App Bridge designed to work on POS? I cant ge't any Flash notification/error messages to appear inside of the Shopify POS app (iOS). 

App Bridge Flash messages work on: 

  • Desktop
  • Mobile safari
  • Shopify mobile iOS app (iPhone and iPad)

Fails on:

  • Shopify POS iOS app (iPhone and iPad)

Apps running in the Shopify POS app are hard to debug due to the in app browser and no introspection tools (seperate conversation), so I dont know if any JS errors are being thrown, but having success on all the other App Bridge supported platforms leads me to believe that there is an issue with POS + App Bridge.

 

 

Adem_Hamidovic
Shopify Partner
2 0 0

Hi Shayne,

You mentioned about a month ago that some new examples and documentation around the App Bridge would be coming, but so far the only documentation I can find are two links on the doc site. Are there any github repos showing examples? Some fleshed out tutorials anywhere on how to best use this? The code snippets provided in the current documentation don't provide much in the way of context or direction.