Parent window cannot communicate accurately to child modals due to timing issues

[bakura10]

Hi,

The official documentation suggests to use the postMessage to communicate from parent window to child modal:

const openModal = async () => {
    await shopify.modal.show('my-modal');
    sendMessageToModal('Hello from the main app');
  }

  const sendMessageToModal = (message) => {
    document.getElementById('my-modal').contentWindow.postMessage(message, location.origin);
  }

There are however two problems.

1. When the parent window try to push the message, the modal is not yet loaded. The first approach I tried is to first listen to the onload event:

modal.contentWindow.onload = () => {
     modal.contentWindow.postMessage(message, location.origin);
}

2. Unfortunately, this still does not work all the time, because of the useEffect. By the time the postMessage is called, the listener might not have been registered. I've tried to wrap it around a setTimeout with an arbitrary value.

modal.contentWindow.onload = () => {
      setTimeout(() => {
        modal.contentWindow.postMessage(message, location.origin);
      }, 1);
    }

Unfortunately, the 1 does not constantly work. I tried 10 and it works most of the time but sometimes not. So you have to use a "large enough" value like 50 or 100. But, as a consequence, the content re-renders after a few milli-seconds and cause a pretty unpleasant user experience.

Ideally, the show promise should resolve once the animation has loaded AND the content has loaded AND after the first render has been done.

[mirceapiturca]

My approach was to send a message from the modal back to the parent. The message sets an isInit flag on parent. After that you can pass messages to the modal.

It is a poor development workflow. The whole message passing is a bad ideea...

[bakura10]

That’s a smart hack ! But it seems it is soon over and Polaris components will work in modals: Shopify/polaris#12445

[bakura10]

@mirceapiturca I've tried the Polaris work done by @vividviolet and it fixes it. Polaris components now work in App Bridge modal without the need to use src and complex modal/parent communication!