---
title: App Bridge Performance Enhancements & Potentially Breaking Changes - Shopify developer changelog
description: Shopify’s developer changelog documents all changes to Shopify’s platform. Find the latest news and learn about new platform opportunities.
source_url:
  html: https://shopify.dev/changelog/app-bridge-performance-enhancements-potentially-breaking-changes
  md: https://shopify.dev/changelog/app-bridge-performance-enhancements-potentially-breaking-changes.md
---

[Back to Developer changelog](https://shopify.dev/changelog)

April 17, 2024

Tags:

* Platform

# App Bridge Performance Enhancements & Potentially Breaking Changes

We are currently testing a feature that can halve load times for embedded Shopify apps using [App Bridge via script tag](https://shopify.dev/docs/api/app-bridge-library#getting-started) and have found cases where apps break when they rely on an undocumented `name="app-iframe"` property to access their iframe

If your app uses the `name="app-iframe"` property to find its embedded app iframe, please either [upgrade to App Bridge React v4](https://shopify.dev/docs/api/app-bridge/migration-guide) or reference the snippet below ([gist here](https://gist.github.com/iwoodruff/7744574bd96a26526bfb30327d3934ad) for reference) to avoid your app breaking in mid May when we begin rolling out these performance enhancements

The performance enhancement works by keeping multiple app iframes in the DOM at any given time. The `name=”app-iframe”` prop will no longer be unique

```typescript
const APP_ID = ''; // accessible via window.shopify.config.apiKey


interface FrameList extends Window {
   [index: number]: Window;
}


function findAppFrameSafely(frameName: string) {
   if (window.parent) {
       const frames = window.parent.frames as FrameList;
       for (let i = 0; i < frames.length; i++) {
           const frame = frames[i];
           try {
               // referencing the name prop of a cross-origin frame will throw when there are multiple frames with the same name
               if (frame.name === frameName) {
                   return frame;
               }
           } catch (_) {
               // noOp
           }
       }
   }
}


const legacyFrameName_doNotUse = 'app-iframe';
const futureProofFrameName = `frame:${APP_ID}/main`;


const appFrame = findAppFrameSafely(legacyFrameName_doNotUse) || findAppFrameSafely(futureProofFrameName);


// continue doing whatever you were doing with the app's main frame
appFrame?.postMessage({}, window.location.origin);
```

* Where `APP_ID` is your app’s apiKey, either provided during config or accessible on `window.shopify.config.apiKey`
* Your app’s iframes are same-origin while other apps’ iframes will be cross origin. The `try / catch` finds only same-origin frames, in this case, your app’s iframe
* To be future proof, also use the unique `name=”frame:${APP_ID}/main”`. At the close of this project, app iframe names will be changed from the static `name=”app-iframe”` to a unique identifier pivoting on `APP_ID`. Please accommodate this new pattern now so your app doesn’t break when we update names!