Find better way to communicate with map in webview

dadiorchen commented 1 year ago

For example: on clicking tree icon on the map, the parent app can receive the event and respond.

dadiorchen commented 1 year ago

According to this commit on web map client: https://github.com/Greenstand/treetracker-web-map-client/commit/1a80d5e378f1bb844dae76654ff94fc607d64c1a

It is possible in the web app using iframe to listen this event, check the log below, the log is from the parent page which embeds the map and received the clicking event:

So next we can try it out on native app

dadiorchen commented 1 year ago

A new approach : postMessage

This is a better way, it solves the CORS problem, I have tested it in different domain, previous way can not allow CORS

https://github.com/Greenstand/treetracker-web-map-client/commit/29b9a6290925d04ab125d3a907c2579906218838

The test HTML page to iframe it:

<html>
  <head>
    <script type="text/javascript">
      const label = "DEMO:";
      console.log(label, "loading");
        window.alert("OK");
        setTimeout(() => {
          console.log(label, "begin listner");
          window.addEventListener("message", e => console.warn(label, "message:", e), false);
        }, 10000);
    </script>
  </head>

  <body>
    <div>
      <h1>demo</h1>
      <iframe
        id="treetracker-iframe"
        title="treetracker"
        src="http://localhost:3000/"
        width="800px"
        height="600px"
      />
    </div>
  </body>
</html>

dadiorchen commented 1 year ago

@pierrelstan I made some progress on the web, take a look, basically this approach requires change on the web map client to emmit the postMessage when things happening, this is similar to your injectJavascript but I think maybe this is more possible to work successfully because there might be security consideration when you injectJavascript on the parent side.

Greenstand / treetracker-web-map-core-demo

Find better way to communicate with map in webview #11