Feature Request: Event based Navigation and data(JSON) sharing between host app/super app and the miniapp

[5AbhishekSaxena]

I have been trying to share data between the host app and the miniapp, then process the data and then navigate back to the miniapp.

If possible data sharing should be done based on the events which can be trigger either from the host app or the miniapp, mostly from miniapp.

The json data can be shared using various ways, like

• Button clicked in miniapp and a callback method is called in the host app which receives the json data.
• A callback method to send/emit the data back to the miniapp

Example

1. Open miniapp(index.html)
2. Click on the button(Click Me!!) to trigger the event.
3. Send the data from the miniapp to the host app
4. Process the data or perform an operation on the data in the host app` the operation can be like make a payment or open another fragment/activity in the host app
5. Call a callback function to open the miniapp again, the page of the miniapp which is opened may or may not be the same from where the event was triggered.
   In the above code snippet, the button is in index.html but the payment_verification.html is opened after the data is processed.

The alternative solution that I have used so far is using the MiniAppNavigator

val miniAppNavigator = object : MiniAppNavigator {
    override fun openExternalUrl(
        url: String,
        externalResultHandler: ExternalResultHandler
    ) {
        // Load external URL with own webView.
        Log.i(javaClass.name, "url: $url")
        
        val amount = splitQuery(URL(url))?.get("totalamount")
        Log.i(javaClass.name, , "total amount: $amount")

        // open fragment/activity and get the result from there
        // Based on the result emit the event to open the corresponding page in the miniapp

        Handler(Looper.getMainLooper()).postDelayed({
            val url = "https://mscheme.0/payment_verification.html" // payment_verification.html is opened in the miniapp
            Log.d(javaClass.name, "Handler callback called, url: $url")
            externalResultHandler.emitResult(url)
        }, 5000L)
    }
}

There is a button in the miniapp which triggers an event to open the URL passed to it.

<button type="button" onclick="onButtonClicked()">Click Me!!</button>

const onButtonClicked = () => {
  console.log('button clicked');
  callExternalUrl(123456);
};

const callExternalUrl = (totalAmount) => {

// I want to send this data to the host app from mini app
  const data = {
      field1: "data1"
  };
  console.log('callExternalUrl called with amount: ' + totalAmount);
  const url = 'https://www.test.com?totalamount=' + totalAmount;

  // window.open('https://www.xyz.com/?' + JSON.stringify(data));
  window.open(url);
};