[MINI-6478] Implement the interface miniAppFinishedLoading() to notify host app.

js-miniapp-bridge/src/common-bridge.ts

@@ -735,6 +735,22 @@ export class MiniAppBridge {
     });
   }
 
+  /**
+   * Associating miniAppFinishedLoading function to MiniAppBridge object.
+   * @returns Promise resolve with string
+   * Host app can implement an iterface miniAppFinishedLoading to perform any operations after the miniapp is loaded.
+   */
+  miniAppFinishedLoading() {
+    return new Promise<string>((resolve, reject) => {
+      return this.executor.exec(
+        'miniAppFinishedLoading',
+        null,
+        success => resolve(success),
+        error => reject(error)
+      );
+    });
+  }
+
   /**
    * This will retrieve the list of products details available for In-App Purchases associated with Mini App in the Platform.
    * @returns List of In-app purchase products

js-miniapp-sample/src/pages/landing.js

@@ -10,6 +10,7 @@ import LanguageRoundedIcon from '@mui/icons-material/LanguageRounded';
 import SettingsApplicationsRoundedIcon from '@mui/icons-material/SettingsApplicationsRounded';
 import StorageRoundedIcon from '@mui/icons-material/StorageRounded';
 import SystemUpdateIcon from '@mui/icons-material/SystemUpdate';
+import MobileHostAppIcon from '@mui/icons-material/SendToMobile';
 import Avatar from '@mui/material/Avatar';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
@@ -82,6 +83,7 @@ const useStyles = makeStyles((theme) => ({
 const Landing = (props: LandingProps) => {
   const classes = useStyles();
   const [darkMode, setDarkMode] = useState(false);
+  const [hostNotified, setHostNotified] = useState(false);
 
   useEffect(() => {
     try {
@@ -101,6 +103,16 @@ const Landing = (props: LandingProps) => {
     }
   }, [props]);
 
+  useEffect(() => {
+    try {
+      if (document.readyState === 'complete') {
+        miniAppDidFinishLoad();
+      }
+    } catch (e) {
+      console.log(e);
+    }
+  }, []);
+
   function getDarkMode() {
     MiniApp.miniappUtils
       .isDarkMode()
@@ -112,6 +124,17 @@ const Landing = (props: LandingProps) => {
       });
   }
 
+  function miniAppDidFinishLoad() {
+    MiniApp.miniappUtils
+      .miniAppFinishedLoading()
+      .then((response) => {
+        setHostNotified(true);
+      })
+      .catch((miniAppError) => {
+        console.log('miniAppFinishedLoading - Error: ', miniAppError);
+      });
+  }
+
   return (
     <CardContent className={classes.content}>
       <List sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
@@ -223,6 +246,17 @@ const Landing = (props: LandingProps) => {
             secondary={String(props.hostBuildType) || '-'}
           />
         </ListItem>
+        <ListItem>
+          <ListItemAvatar>
+            <Avatar>
+              <MobileHostAppIcon />
+            </Avatar>
+          </ListItemAvatar>
+          <ListItemText
+            primary="HostApp Notified:"
+            secondary={String(hostNotified)}
+          />
+        </ListItem>
         <ListItem>
           <ListItemAvatar>
             <Avatar>

js-miniapp-sdk/CHANGELOG.md

@@ -3,6 +3,7 @@
 ### 1.20.0 (2024-xx-xx)
 - **Feature:** Added new interfaces `set(key: string, value: string)`, `get(key: string)`, `remove(key: string)`, `clearMiniAppPreferences()` which uses the native storage features like Shared Preferences/User defaults to store anything from MiniApp.
 - **Feature:** Updated HostEnvironmentInfo to have `hostBuildType`, `deviceToken` and `pushToken`
+- **Feature:** Added new interface `miniAppFinishedLoading()` which can be used by miniapp to notify the host app that it has finished loading.
 - **Fix:** Few Contacts with special characters is failed to retrieve, its fixed now
 
 ### 1.19.0 (2023-11-02)

js-miniapp-sdk/README.md

@@ -1186,6 +1186,32 @@ import MiniApp from 'js-miniapp-sdk';
   MiniApp.miniappUtils.sendAnalytics(analyticsInfo);
 ```
 
+<div id='miniapp-finished-loading'/>
+
+## MiniApp Finished Loading <small style="color:green;font-size: 12px">Available from v1.20.0</small>
+
+<dl>
+<dd>
+
+**API:** [Platform.isDarkMode](api/interfaces/miniapputilsprovider.html#miniAppFinishedLoading)
+
+Using the following interface the Miniapp can notify the host app that it has finished loading.
+
+```javascript
+import MiniApp from 'js-miniapp-sdk';
+
+MiniApp.miniappUtils
+  .miniAppFinishedLoading()
+  .then((response) => {
+    console.log(response);
+  })
+  .catch((miniAppError) => {
+    console.log('miniAppFinishedLoading - Error: ', miniAppError);
+  });
+```
+
+</dd>
+
 <div id='get-cookies'/>
 
 ## Get Cookies from host application <small style="color:green;font-size: 12px">Available from v1.19.0</small>

js-miniapp-sdk/src/modules/utils.ts

@@ -22,6 +22,12 @@ export interface MiniAppUtilsProvider {
    */
   closeMiniApp(withConfirmation: boolean): Promise<string>;
 
+  /**
+   * Miniapp can notify the host app that it has finished loading using this call.
+   * Host app can implement this interface to perform any other actions after the miniapp has loaded.
+   */
+  miniAppFinishedLoading(): Promise<string>;
+
   /**
    * Interface that is used to get the Color theme used in the Host application
    */
@@ -44,6 +50,9 @@ export class MiniAppUtils implements MiniAppUtilsProvider {
   closeMiniApp(withConfirmation: boolean): Promise<string> {
     return getBridge().closeMiniApp(withConfirmation);
   }
+  miniAppFinishedLoading(): Promise<string> {
+    return getBridge().miniAppFinishedLoading();
+  }
   setCloseAlert(alertInfo: CloseAlertInfo): Promise<string> {
     return getBridge().setCloseAlert(alertInfo);
   }