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

[qq192]

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: 

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. 

[Alex]

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.

[qq192]

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

[qq192]

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

[Alex]

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.

[qq192]

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?

[Alex]

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.

[DiscountNinja]

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

[Alex]

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.

[DiscountNinja]

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

[DiscountNinja]

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

[Alex]

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.

[DiscountNinja]

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

[DiscountNinja]

Hi Alex,

Can you flip the switch for 1644751 as well please?

Regards,

Bart

[Alex]

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

Cheers.

[DiscountNinja]

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?

[Alex]

@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.

[DiscountNinja]

@Alex, I'm referring to "Dashboard", "Promotions" and "Settings".

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.

[DiscountNinja]

@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.

[DiscountNinja]

@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.

[Alex]

@DiscountNinja Would you be able to give me one or more test environments where I can replicate this behaviour?

Cheers.

[DiscountNinja]

@Alex Sure, how can I DM you?

[DiscountNinja]

Hi @Alex 

Sent you an email with the environments and credentials.

Note: the issue is not limited to buttons, it's a general issue with the App Bridge functionality not being available.

To test, you can go to the console (ensure you're executing the javascript in the iFrame) and type:

limoniAppsCore.ShopifyEmbeddedApp.Bar.ShowLoading()

It should trigger the progress bar, but it does nothing.

After analyzing the details of the event received by the App Bridge I'm starting to think maybe the origin could be the issue. The origin is a different domain then the App Url configured in the App Setup. Could that be causing this?

In my case the origin as detected by the App Bridge is "https://app.discountninja.io" (the domain of the V3 app).

The App Url configured in the App Setup is a different domain (domain of the V2 app).

Regards,

Bart

[DiscountNinja]

For those who are also experiencing this issue, let me summarize my findings:

• The error message: 'Unsupported Message "This app can't be loaded"' can occur when your app is configured on Shopify's backend to be in "legacy mode" (you can easily detect an app is in legacy mode if the title bar does not show the icon of the app and displays menu buttons in a single bar instead of on two bars).
• Deleting navigation items from your app's configuration setup on Shopify (apps/[your app id]/manage_extensions/shopify_admin/embedded_app/configure) can take a while to take effect. In my case it took over 24 hours for the navigation items to disappear from the app.
• The App Bridge (as well as the Shopify App embedded app library) does not support scenarios where the domain on which you initialize the App Bridge in JavaScript is not the domain of the App Url. It uses postMessage to send messages between the iFrame that hosts your app and the Shopify admin frame. Shopify's implementation requires the actual final origin of the iFrame to match the App Url's domain. That means you cannot use App Bridge if you:
  
  • Configure a url on domain X in the App Url which then redirects to another domain Y to run your app (for example after performing onboarding on X or doing authentication on X)
  • Configure a url on domain X in the App Url which is resolved to domain Y in a CNAME in your DNS 

[EasyFeedApps]

The error message: 'Unsupported Message "This app can't be loaded"' can occur when your app is configured on Shopify's backend to be in "legacy mode" (you can easily detect an app is in legacy mode if the title bar does not show the icon of the app and displays menu buttons in a single bar instead of on two bars).

@Alex I'm having a similar issue with my app ID 1381729. It's an older embedded app that I'm trying to move to App Bridge from EASDK. There are no references ShopifyApp and all the old EASDK app code has been removed (also not loading the javascript). 

Not sure if I'm doing something else wrong here to not get out of legacy mode but a forced switch would be very helpful.