"This app does not appear to be loading and may be outdated" error

"This app does not appear to be loading and may be outdated" error

user072319
Shopify Partner
128 0 17

Hello there,

 

Our Shopify app merchants are complaining that they are seeing the below errror in their dashboard. 

selectfurniturestore · flareAI - Google SEO Traffic · Shopify 2023-01-26 23-30-45.png

Our app is an embedded app.

 

From the documentation, I understood that we have to migrate app to App Bridge 3.0. 

 

Our current code is as shown below. 

 

..........
<link rel="stylesheet" href="https://sdks.shopifycdn.com/polaris/latest/polaris.css" />
<script src="https://unpkg.com/@shopify/app-bridge@2"></script>
............
<script type="text/javascript">
	var AppBridge = window ['app-bridge'];
	var createApp = AppBridge.default;
	var app = createApp ({
		apiKey: '<?php echo $apikey;?>',
		shop: '<?php echo $shop;?>',
		shopOrigin: '<?php echo $shop;?>'
	});
</script>	

What changes should we do to migrate to App Bridge 3.0?

 

Any help would be appreciated

Replies 4 (4)

Bill_F_Shopify
Shopify Staff
2 0 2

Hello. 

It looks like you're including App Bridge via a <script> tag pointing to a CDN-hosted copy of the library. Specifically, it looks like you're using using `@shopify/app-bridge@2`. To start using App Bridge 3.0, you should be able to replace the 2 with 3. 

For example:

- <script src="https://unpkg.com/@shopify/app-bridge@2"></script> 
+ <script src="https://unpkg.com/@shopify/app-bridge@3"></script> 

To learn more visit the Shopify Help Center or the Community Blog.

JoeyF
Shopify Staff (Retired)
35 7 12

@user072319 , the instructions here include all the required changes.

 

In the code snippet you included, I noticed that App Bridge is initialized with the shop and shopOrigin parameters. This should change, and you should initialize App Bridge with a host parameter instead (as shown here).

To learn more visit the Shopify Help Center or the Community Blog.

user072319
Shopify Partner
128 0 17

@JoeyF 

 

Thank you for the response.

 

Still some doubts.

 

1. I didn't made any changes as of now (still in App bridge 2 as shown in my question). I just opened our app from the Apps and sales channels Settings for one of a Shopify store. 

On clicking our app, it got redirected to a link like 

https://xxxxxx.myshopify.com/admin/apps/our-app-name

So where can I get the host from?

 

2. Is the host different each time the client loads the app? Or is it same till they uninstall the app?

 

Hope you can provide some pointers on this.

 

Thanks in advance

JoeyF
Shopify Staff (Retired)
35 7 12

I didn't made any changes as of now (still in App bridge 2 as shown in my question)


👍 
But you will need to make changes in order for your app to be compatible with the changes that are coming to the Shopify platform (moving to the admin.shopify.com domain).

 


So where can I get the host from?

The host is passed as a query-string parameter, when Shopify loads your app.
I am not a PHP developer, but I think that this will do the trick:

<?php echo $_GET['host']; ?>

As mentioned above, you should avoid initializing App-Bridge with shop and shopOrigin, and specify the host instead (as shown in the docs).

 

 

As for

 


Is the host different each time the client loads the app? Or is it same till they uninstall the app?

The host is a base64 encoding of the shop's domain, (either admin.shopify.com/store/${SHOP} or ${SHOP}.myshopify.com/admin)

 

Shops are being migrated to the new domain gradually, and there is no way for your app to know in advance which (of the two domains) a shop will be running on. That's why Shopify provides the host value when it loads your app.

 

 

 

Final note: The host query-string parameter will only be available when Shopify first loads your app. If your app is NOT a single-page app, you'll need to persist the host on the server (e.g. in the session) in order to inject it on subsequent page loads.

To learn more visit the Shopify Help Center or the Community Blog.