App Bridge Unsupported Message "This app can't be loaded"

Retired Boards Appdev Tools
1

HI all,

I am currently trying to upgrade an app to use the Shopify App Bridge, but any time any method is called this screen comes up:

Screen Shot 2019-04-08 at 3.04.55 PM.png
Screen Shot 2019-04-08 at 3.04.55 PM.png2558Ă—1102 195 KB

I have embedded apps enabled in the app extensions area, and it works fine in my development app with the exact same settings, but when I deploy to staging I am getting this message. I have removed any references to the Embedded app SDK and am only loading the App Bridge, I also double checked that the shopOrigin and api key are correct. Has anyone had a similar issue? Maybe it’s something simple I am missing.

2

Hey @qq192 .

What’s your app ID? I can check what might be going on from here. You can get your numeric app ID from the end of the URL in your partner dashboard when viewing the app specifically.

Cheers.

3

Hey Alex, thanks for the help, the id is 1797371

4

Hey @Alex did you happen to look into this? Much appreciated!

5

Sorry for the delay. It looks like you might be using Embedded App SDK methods that are incompatible with App Bridge. Are you using any of these?

        'ShopifyApp.Modal.input',
        'ShopifyApp.Analytics.fetch',
        'ShopifyApp.Nav.initialize',
        'ShopifyApp.Nav.select',
        'ShopifyApp.Sidebar.setSection'

You have a feature enabled on your app which would enable the use of the Analytics API for example, which at this time cannot be used in tandem with App Bridge.

6

Hey @Alex , I did double check and we removed all references to ShopifyApp, and we are not even loading the app.js embedded app sdk. Is it an issue that we used those methods in the past and now we aren’t able to upgrade to the App Bridge, or should it be working once those are removed?

7

Heya. I’ve pulled some levers on my end and you should now be good to use app bridge. Let me know if you notice anything unexpected, but you should be fine.

Cheers.

1 Like
8

Hi Alex,

I’m seeing the same issue on app 2911355 (dev app).

We’re going to be upgrading the menu for app 1644751 (production app) as well.

But for that app I need both the AppBridge and the ShopifyApp to work since we have two versions live, one upgraded to AppBridge and one not.

Could you pull the same levers for app 2911355 and tell me how to proceed for app 1644751?

Many thanks in advance,

Bart

9

Hey Bart.

I’ve flipped the switch on 2911355.

I can flip the switch on 1644751 but if you’re using any of the above mentioned methods you’ll end up getting flipped back. There’s not too much I can do about that one on my end until the app is clear from making these calls.

Which embedded app methods do you utilize?

Cheers.

10

Hi Alex,

Thanks for your reply. I’ll test this on our dev app tomorrow.

In the production app we use:

  • ShopifyApp.Bar.loadingOn/Off()

  • ShopifyApp.Bar.initialize(configuration)

  • ShopifyApp.Bar.disableAllButtons()

Regards,

Bart

11

Hi Alex,

I checked in on the dev app and it’s not really the result I’m looking for.

Switching the setting changes the navigation bar (two bars instead of one), which we don’t intend to use.

The reason we wanted to change is only to be able to use the variant picker, which seems to be only available with App Bridge.

Is there a way for us to continue to use the single bar navigation and leverage the variant picker functionality?

Regards,

Bart

12

Hey Bart.

The two bars along the top which represent the TitleBar action is a part of App Bridge’s implementation. I don’t believe you can make use of storing the navigation and title in a single bar while being “migrated” to App Bridge at the same time (that is, not using any deprecated Embedded App SDK methods).

Feedback is most welcome on this front though, it’s my job to pass that along, so let me know what kinds of issues this causes for you either here or in a DM. If you need any help migrating, let me know as well. (I could probably roll you back to your prior state as well)

Cheers.

13

Hi Alex,

As others have reported as well the double title bar unnecessarily reduces the already limited screen real estate for apps.

I feel there are better ways to convey to users that they are using an app by a third party vendor.

In my opinion the icon next to the app’s name is sufficient to remind users that they are not using an app made by Shopify.

I feel app authors should have the option to choose if they want two bars or a single bar.

Regards,

Bart

14

Hi Alex,

Can you flip the switch for 1644751 as well please?

Regards,

Bart

15

@DiscountNinja done, let me know if anything unexpected occurs.

Cheers.

1 Like
16

Thanks for the quick response Alex, appreciate it.

The switch had a side effect I didn’t anticipate: the navigation links / menu items configure in the app are now displayed.

I removed them (apps/[myapp]/manage_extensions/shopify_admin/embedded_app/configure), but they still display.

Is there anything else I need to do to remove those menu items?

17

@DiscountNinja if you’re referring to the Refresh + Settings buttons, it looks like those are considered secondary buttons, not navigation items. Are you calling ShopifyApp.Bar.initialize() with buttons in the options object? I’m not seeing us pulling any navigation items or buttons from your app’s settings.

Cheers.

18

@Alex , I’m referring to “Dashboard”, “Promotions” and “Settings”.

menubar issue.png
menubar issue.png502Ă—111 3.83 KB

Those were configured as navigation items in the app previously.

The switch seems to have reactivated them. I deleted them today.

I’m 100% sure we’re not adding those buttons via JavaScript.

19

@Alex

I’ve now put the new version of the app live and unfortunately the App Bridge part of the app doesn’t work.

So now we have two problems, indicated in bold in the summary.

Note that our production app routes users to different versions of our backend:

V1 is our legacy version, V2 is the current version, V3 is the new release (not GA).

The test app routes all users to V3.

Here’s a summary:

  • On the test app (2911355)
    • All traffic is routed to V3 of the app
      • Navigation items are not displayed
      • Menu buttons are displayed correctly using App Bridge
  • On the production app (1644751)
    • When routing to V1 of the app
      • Deleted navigation items are displayed (since they contain links to V2 this causes the app to break)
      • Menu buttons are displayed correctly using the old Shopify Embedded Apps javascript
    • When routing to V2 of the app
      • Deleted navigation items are displayed (they work since they are V2 related, but we don’t want to display them)
      • Menu buttons are displayed correctly using the old Shopify Embedded Apps javascript
    • When routing to V3 of the app
      • Deleted navigation items are displayed (since they contain links to V2 this causes the app to break)
      • Menu buttons are not displayed. The newer App Bridge is used here.

Regarding the first problem:

  • These navigation items were created as a work around last year when problems with the App Bridge were breaking our app
  • It seems there is a bug (or a cache?) when deleting them

Regarding the second problem:

  • There are no error messages in the console
  • The only differences between the production and test app I can see are:
    • They use a different entry point (App Url), configured in the App Setup
    • Potentially they are configured differently in your backend because the test app was created much later than the production app

I’d appreciate some help on this because at it stands the navigation is breaking the user experience for a large percentage of our users in production.

20

@Alex

I’ve just tested again and it seems problem 1 (Deleted navigation items are displayed) is now resolved.

I’m assuming it was a cache issue?

So, now only problem two remains.