App Bridge on Mobile

There are several tools available to help you run App Bridge apps on mobile.

Unframed mode

Running your App Bridge app in unframed mode removes the need for an iFrame. This means that your app is running on your domain and not on Shopify. Unframed mode dramatically decreases load times, improves user experience, and removes any issues presented with 3rd party cookies paired with iFrames.

Requirements

  • Your app has access to the app_bridge_mobile_unframed beta
  • Your app is running on App Bridge v2.0.5 or higher
  • Your app is using session tokens
  • Your app runs on one of the following mobile OS versions:
    • Android v9.40.0 or higher
    • iOS v9.40.0 or higher

Requesting Beta Access

You can request access to the beta using this form. After you've made your request, a team member will review the information and apply the beta on your behalf.

Authentication

When you use unframed mode, your app no longer redirects back to Shopify Admin at the end of the OAuth authentication flow. However, after the OAuth flow is done, you must make sure that the top-level domain is set as the same domain as your app.

Shopify App Gem Example

Redirects

The navigation action that is set in App Bridge is the method where redirects are performed. The APP::NAVIGATION::REDIRECT::ADMIN::PATH action can be used to navigate to different routes inside the Shopify admin.

For example, you can use this action to navigate to the products list. In unframed mode, the APP::NAVIGATION::REDIRECT::ADMIN::PATH action presents the products list in a modal.

If your app performed these types of redirects, there are no changes required. However, if your app redirects to a route that is not in the following list of approved admin routes, then be aware that the redirect will occur in a new view and will be presented on top of the current one.

Approved Admin Routes:

  • /products/*
  • /collections/*
  • /orders/*
  • /customers/*
  • /discounts/*

UI Components

When running your app in unframed mode, any actions that display UI components now use the components native to that platform. These components are the same ones used by the Shopify app instead of loading them within the web container your app is running in. These components are more robust, load faster, and deliver a better experience to merchants.

Components:

  • ContextualSaveBar
  • Loading
  • Menu
  • Modal
  • ResourcePicker
  • Scanner
  • Share
  • TitleBar
  • Toast

Unframed Mode Utility

You can detect whether your app is in unframed mode by using the isUnframed utility: