Why is it so hard to post a full example of a WebPage talking to an AndroidApp?

flaviolenz commented 3 years ago

This is so poorly documented: https://firefox-source-docs.mozilla.org/mobile/android/geckoview/consumer/web-extensions.html

The closest to a decent example I got was this one: https://github.com/a251115100/geckoview-jsdemo (But it lacks the webpage code)

WebView is so simple to use JavascriptInterface.

So, can anyone provide a simple straight forward example on how to do this:

x.html (hosted somewhere in the web - not deployed as a resource in the app)

<html>
<script>
   function appToPage(s)
   {
      log('received:' + s);
   }

   function pageToApp(s)
   {
      // do something to send s to app
      log('sent:' + s);
   }

   function log(s)
   {
      var x = document.getElementById('x');
      x.innerHTML += '<br>' + s;
   }

   var i = 0;
</script>

<body>
<input type=button onclick="pageToApp('helloFromPage' + (i++))" value="SEND">
<div id="x">To see what is going on when runing in a Android device</div>
</body>
</html>

<script>
   log('started');
</script>

On the Android side, something like this:

public class MainActivity extends AppCompatActivity
{
   protected void onCreate(Bundle savedInstanceState)
   {
      ...
      //all the stuff needed for GeckoView and extensions
      geckoSession.loadUri("http://example.com/x.html");
      ...
   }

   // when some user press some button in the browser
   public void onSendButtonClick()
   {
      // do somenthing to call appToPage("helloFromApp");
   }

   // this should be called when a message arrives
   public void onMessageFromPage(String s)  // or whatever object as parameter (JSON, for example)
   {
      Log.d("msgFromPage", s)
   }
   ...
}

I already understood that I need an Extension in the middle but it is really not clear how to get the pipes connected.

MainActivity <-> Background.js <-> Content.js <-> x.html

pabiagioli commented 2 years ago

Are there any updates on this? I'm very interested in getting a fully functional communication between GeckoEngineView and an Android Activity/Fragment

flashjames commented 2 years ago

There's two examples how to make this work here: https://searchfox.org/mozilla-central/source/mobile/android/examples

a251115100 commented 2 years ago

in this demo https://github.com/a251115100/geckoview-jsdemo You can send messages use methond (window.JSBridge.postMessage('from web html')) to the app from the web side

truefedex commented 1 year ago

I made some example of such communication with pre-packaged web page: https://github.com/truefedex/GeckoViewNativeWebApp Unfortunately, I had to unpack the web page files from the assets to the internal storage.

This is a workaround, albeit an inefficient one (you need to update the contents of the folder when you update the application, the files will take up twice as much space, etc.).

But if you load files directly from assets, then you won’t be able to load the content script from the web extension and organize interaction with the native part (because content_scripts.matches does not accept strings like jar: file:/data/app/ or resource://android /assets/)

mozilla / geckoview

Why is it so hard to post a full example of a WebPage talking to an AndroidApp? #163