How To Load Embedded Apps Quickly And Reliably

Slow loading of embedded apps can be stressful for users. App users will not be able to work and will have a negative impression of your app. To make matters worse, if it doesn’t load at all, you’ll have to spend all your time checking the report to determine the cause.

App load delays and failures are primarily due to Shopify’s app authentication. In this article, I’ll show you how embedded app authentication works and new solutions to this frustrating problem. 

How The Embedded App Is Loaded

When the merchant clicks the link to load the app, it will appear on the screen after a few seconds. What is happening under the surface at this time?

First, Shopify creates an iframe on the admin screen and sets the URL of the app. When the browser makes a request to the app, it will contain some cookies previously set by the app. The session information contained in this cookie tells the app who is accessing it.

Sometimes there are no cookies or the session does not contain user information. In this case, the app Shopify of OAuth redirects the user to the service, OAuth is making sure that the user has to install the app, then redirects the user back to the app. At this time, the user recognition information is passed to the app. The app saves your user information and links it to a session cookie. As a result, subsequent interactions will occur without the involvement of the OAuth service.

Now that the app can determine who the user is, it can load based on user-specific information.

What Causes Slow App Loading?

The process of redirecting to the OAuth server is slow. Redirection cannot be done inside the iframe because it sets a session cookie. Instead, the entire browser is redirected. All the redirects required for OAuth simply redirect the user to the Shopify admin and embedded app pages at the end. In many cases, browser redirects are seamless to the user. However, due to the number of redirects required and the jump back and forth between the frame and the top frame of the browser, users will find the app loading slow and undirected.

The overall flow is as follows.

1 Embedded iframe: Load app

2 Top Frame: App redirects to Shopify OAuth

3 Top Frame: Shopify OAuth redirects to the app

4 Top frame: Load the app, recognize that it is outside the iframe, and redirect to the admin

5 Loading top frame  admin

6 Embedded iframe: Load app

Performance suffers at each stage, which in turn results in a disappointing UX. The overall load time has increased to as much as 10 seconds, which can be very long for users who are not patient. 

Causes When The App Does Not Load At All

Over the past few years, browser vendors have focused on protecting user privacy. This is good for users because they have control over how the data is handled. Browser vendors, in particular, have sought to stop tracking across sites.

Neither Shopify nor related apps are the “trackers” that browser vendors are trying to block. However, the technology we use to enhance embedded apps ( iframes ) is the same technology used for many cross-site tracking. As a result, browser-implemented cross-site tracking regulations, such as Safari’s ITP ( Intelligence Tracking Prevention ), are hampering the functionality of the Shopify app.

The most relevant regulation is the restriction on the use of iframe cookies (third-party cookies). Shopify apps use cookies to store user sessions, so you don’t often need an OAuth flow. If third-party cookies are restricted, this information cannot be retrieved or stored and is prone to read errors. 2020 years 8 May, the reading error of the app is on average 1 per day 5,150 occurred times.

If the user sees this error, it’s likely that a third-party cookie is a problem.

There are ways to get around regulations like Safari’s ITP, but they are difficult to implement, force unwanted UX, and cannot cover all cases.

Also Read : How To Increase Online Sales! Effective Use Of Special Sales, Coupons, And Discounts

How To Fix Read Delays And Third Party Cookie Errors

Shopify is introducing a new way to load apps. Instead of using session cookies to retrieve and store user information, you can use session tokens. This session token is a secure packet containing information about the user accessing the app. Like a session cookie, this token conveys your information to your app.

When the app loads, the front end gets a session token through the App Bridge. This token will be included in the request to the app’s backend and will provide all the user-specific information that the app needs. This means that in most cases, your app will only perform an OAuth redirect on the first install and will not need to store your user information in a cookie. Instead, the app can use the session token after the initial installation.

Comparison of old and new embedded application loading flow

This mechanism is significantly more reliable and faster than the cookie-based approach. Apps that use App Bridge authentication can load up to 4 times faster and do not cause cookie-related loading errors. The following video compares how fast an embedded app with App Bridge authentication loads. 

If you want to know more about implementing session tokens, please visit our detailed tutorial.

Note: In order to implement a session token in a request to your app’s backend, the request must come from frontend JavaScript. So for SPA, it’s easier to convert. That’s because SPA already uses JavaScript-based requests for most of its back-end interactions. If your app is the server-side rendering of the front end (traditional Ruby on Rails apps, Django apps, PHP apps, etc.), you may need to do some additional work and encapsulate it with a tool such as Turbolinks. Maybe. There is a separate tutorial that explains how to do this.

To Improve The User Experience

Load speed and stability issues frustrate users and reduce app utilization. Encouraging restrictions on third-party cookies in browsers only exacerbates the problem.

Shopify’s new authentication method, an embedded app solution, can solve both issues at once while improving the app’s user experience. 

Also Read : Instagram App Introduction: 20 Tools To Grow Your Account