How to migrate our app to App Bridge 3.0?

[AnnaKornit]

Hello,

Our app is currently under review and we require some technical assistance with the below request:

This is a requirement as Shopify is moving to this new domain and all merchants will have access to it, as of Jan 31st, refer to our changelog for details. To resolve this issue, reference our Setting up Iframe protection document as well as ensure your app is at minimum on App bridge 2.0, App bridge 3.0 is recommended

Iframe protection is already addressed, but the migration to App bridge 3.0 point is still open.

We are currently using a cdn hosted version via script tag:

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

Which then is used to create:

this.app = window['app-bridge'].createApp({
				apiKey: this.args.apiKey,
				shopOrigin: this.args.shopOrigin
			});

Which then, in separate functions, uses app-bridge actions:

private handleOnLoading() {
			const actions = window['app-bridge'].actions;

			const loading = actions.Loading.create(this.app);
			loading.dispatch(actions.Loading.Action.START);

			$('html').css('cursor', 'wait');
		}

		private handleOnLoaded() {
			const actions = window['app-bridge'].actions;

			const loading = actions.Loading.create(this.app);
			loading.dispatch(actions.Loading.Action.STOP);

			$('html').css('cursor', '');
		}

		private handleOnToast(message: string) {
			const actions = window['app-bridge'].actions;

		const toastNotice = actions.Toast.create(this.app, {
			message,
			duration: 2000
		});
	toastNotice.dispatch(actions.Toast.Action.SHOW);
}

What are the next steps to be able to migrate, do we just change the shopOrigin to Host?

Thanks

Anna

[Dynasort]

I've been fighting through this the last few days as well on our apps.

1. On AppBridge 3, you'll need to pass the host parameter that shopify adds as a GET parameter when directing the merchant to your app. This is a base64 encoded string of the shop's admin, but pass the actual GET parameter value (not decoded).
2. If you haven't already, you'll have to get Shopify to switch one of your development stores to the new Unified Admin setup so you can test your app on admin.shopify.com/stores/your-dev-store instead of just your-dev-store.myshopify.com.
3. Once all that's in play, go to the unified admin, load your app, wait 5-6 seconds and make sure the screen that says "This App is Outdated" doesn't appear.

[AnnaKornit]

Thanks a lot for your help.

we've managed to be able to update to App-Bridge 3 changing to using:

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

&

this.app = window['app-bridge'].createApp({
   apiKey: this.args.apiKey,
   host: this.args.host,
   forceRedirect: true
});

However we are still having issues with frame ancestors, this only happens on `admin.shopify.com` and not the legacy version.

Here's some screenshots showing we return what they expect & unsure what is causing the error, in the differences between the two, you can see we are attaching the header too.

$this->getResponse()->getHeaders()->addHeaderLine('Content-Security-Policy', "frame-ancestors https://{$params['shop']} https://admin.shopify.com");

[Dynasort]

I don't normally do too much in Node, so I can't say specifically if there's an issue there. Have you checked browser side to ensure the header is actually getting sent + received?