examples/webapp-library
This example is an extension of react-multi. The parent and web apps are created as React apps but the webapp-library is created so that it could work with any JavaScript implementation supporting Node packages. It creates a functional library abstraction for web apps displayed in iframes. The api breakdown and lib types and how they’re used by the sample web apps are artificial constructs intended for larger, more complex applications but, ignoring the fact you would never implement the example so complexly, it does a good job of showing how different libraries for different types of webapps could be created to mix and match reuseable apis in any way desired.
The parent window uses an iframe to display a full page photo from Lorem Picsum. This iframe is considered a LibType1 instance of a webapp. The parent then displays a small row of four iframes over the top of the full sized photo that each display a selectable photo. These four iframes are each instances of LibType2 abstractions. The parent supports four apis, Api1 has a single function is supported by the iframe that displays the full size photo with a specific id; it is only used by LibType1 iframes. Api2 is supported by the smaller iframes, LibType2 iframes. These smaller iframes use a function in Api2 that is called when they are clicked on, to send the id of their photo to the parent. The parent then uses the function in Api1 to change the full screen image. When a photo is selected the parent also uses an additional function in Api2 to request a new photo in all of the smaller non-selected iframes. In addition, Api3 is used to allow an iframe to turn off or on blur or grayscale. In this example code it is added to the first smaller, LibType2, iframe. A Common api is used by all webapps, LibType1 and LibType2 iframes, to display the results of settings made with Api3.
A webapp-library creates a function call abstraction over the web-api-bridge for use by the web app iframes. These function calls just communicate with the parent but they could also intermix local functionality that doesn’t cross the bridge. When the parent loads the iframe it notifies the library of its type and the apis supported. Callbacks (incoming calls from the parent) are set on each api using the setCallback() function. Since this lib is used by the web apps, be sure to build this library before running yarn or npm install on the web apps.
In the example, webapp1 is loaded once as a LibType1 and then two more times as LibType2 instances, once as supporting Common, Api2 and Api3 then just supporting Common and Api2. All three instances of webapp1 are loaded from the same url and each instances figures out its type at load time. The LibType2 instances also determine if they have Api3 support to changes image display characteristics.
Two instances of webapp2 are luanched as LibType2 apps in the final two iframes, each supporting Common and Api2 apis.