[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 interface 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/App.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import ConsoleView from './pages/console-view';
 
 import { makeStyles, ThemeProvider } from '@material-ui/core';
@@ -7,22 +7,67 @@ import { Provider } from 'react-redux';
 import Home from './pages/home';
 import store from './services/store';
 import Theme from './theme';
+import MiniApp from 'js-miniapp-sdk';
 
 const useStyles = makeStyles((theme) => ({
   App: {
     width: '100%',
     textAlign: 'center',
   },
+  toastStyle: {
+    position: 'fixed',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    padding: '10px',
+    backgroundColor: '#444',
+    color: 'white',
+    borderRadius: '5px',
+    zIndex: '9999',
+    textAlign: 'center',
+  },
 }));
 
 function App() {
   const classes = useStyles();
+  const [toastVisible, setToastVisible] = useState(false);
+
+  useEffect(() => {
+    try {
+      if (document.readyState === 'complete') {
+        miniAppDidFinishLoad();
+        console.log('Called Miniapp FinishedLoad()');
+      }
+    } catch (e) {
+      console.log(e);
+    }
+  }, []);
+
+  function miniAppDidFinishLoad() {
+    MiniApp.miniappUtils
+      .miniAppFinishedLoading()
+      .then((response) => {
+        console.log('miniAppFinishedLoading(): ', response);
+        setToastVisible(true);
+        const timer = setTimeout(() => setToastVisible(false), 5000);
+        return () => clearTimeout(timer);
+      })
+      .catch((miniAppError) => {
+        console.log('miniAppFinishedLoading - Error: ', miniAppError);
+      });
+  }
+
   return (
     <Provider store={store}>
       <ThemeProvider theme={Theme}>
         <div className={classes.App}>
           <Home />
           <ConsoleView />
+          {toastVisible && (
+            <div className={classes.toastStyle}>
+              HostApp was notified successfully.
+            </div>
+          )}
         </div>
       </ThemeProvider>
     </Provider>

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
 - **Feature:** Added new interface `getFeatureList()` that will return the list if features supported by the Host and MiniApp SDK.
 

js-miniapp-sdk/README.md

@@ -144,6 +144,7 @@ Here is the example of manifest. You can also see [it](https://github.com/rakute
 - [Send Analytics](#send-analytics)
 - [Get Cookies](#get-cookies)
 - [MiniApp Storage][#miniapp-storage]
+- [MiniApp Finished Loading](#miniapp-finished-loading)
 - [Get Feature list][#get-feature-list]
 
 
@@ -1187,6 +1188,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.miniAppFinishedLoading](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
    */
@@ -49,6 +55,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);
   }