App Bridge Performance Enhancements & Potentially Breaking Changes

Platform

We are currently testing a feature that can halve load times for embedded Shopify apps using App Bridge via script tag 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 or reference the snippet below (gist here 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

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!