Is it possible to call/see the android app’s Cordova plugin from an external site that opens inside the app?

Question

I have a simple app using Cordova, inside, I call an external web application developed in Angularjs. I intend to start monetization in the app, and for that I want to make sales through the Google Play Store, within it. To do so, I need to inside this external web application, call the javascript/inAppPurchase plugin that has already been added to the project.

It turns out, obviously, that directly this is not possible. Currently, my call to the external application is like this:

<script>
  document.addEventListener("deviceready", onDeviceReady, false);
  function onDeviceReady() {
    if (navigator.network.connection.type == Connection.NONE) {
      networkError()
    } else {
      loadApp()
    }
  }

  function loadApp() {
    navigator.app.loadUrl("http://192.168.0.102:8000/")
  }
</script>

The plugin I want to call: Inapppurchase - https://github.com/AlexDisler/cordova-plugin-inapppurchase

Calling from the index.html of the Cordova project it works right, now from the external application, presents the following error:

Uncaught Referenceerror: inAppPurchase is not defined

The call in the index of the external project that is called inside the app is like this:

<script>
  inAppPurchase.getProducts(['vaga_de_veiculo'])
    .then(function (products) {
      console.log(products);
    })
  .catch(function (err) {
    console.log(err);
  });
</script>

I’m trying now with inAppBrowser, but also not successful.

I appreciate any help!

Answer 1

I solved the problem, I hope it helps others. SOLUTION WORKS ONLY FOR ANDROID.

The call in index.html in the www folder of the Cordova project is as follows:

<script>
  document.addEventListener("deviceready", onDeviceReady, false);
  function onDeviceReady() {
    if (navigator.network.connection.type == Connection.NONE) {
      networkError()
    } else {
      loadApp()
    }
  }

  function loadApp() {
    window.open("http://192.168.0.102:8000/", "_system");
  }
</script>

config.xml needed to have the following informed lines:

<access origin="*" subdomains="true"/>
<allow-navigation href="http://192.168.0.102:8000/*" />

I had to change the class Systemwebviewclient.java of Ordova. It is located in \Platforms android Cordovalib src org apache Cordova engine Systemwebviewclient.java adding the following instructions:

Declare variable that will be injected into the javascript call in your external application:

private static final String INJECTION_TOKEN = "**injection**";

Locate the method: shouldInterceptRequest and shortly after the Try{ add the following code:

if(url != null && url.contains(INJECTION_TOKEN)) {
String assetPath = url.substring(url.indexOf(INJECTION_TOKEN) + INJECTION_TOKEN.length(), url.length());
try {
    String mimeType = "text/plain";

    String ext = assetPath.substring(assetPath.lastIndexOf(".") + 1, assetPath.length());
    WebExtension extension = WebExtension.valueOf(ext.toUpperCase());

    switch(extension) {
        case PNG:
            mimeType = "image/png";
            break;
        case MP3:
            mimeType = "audio/mpeg";
            break;
        case MP4:
            mimeType = "video/mp4";
            break;
        case TTF:
            mimeType = "application/x-font-ttf";
            break;
        case SVG:
            mimeType = "image/svg+xml";
            break;
        case JS:
            mimeType = "application/javascript";
            break;
        case ICO:
            mimeType = "image/x-icon";
            break;
        case HTML:
            mimeType = "text/html";
            break;
        case CSS:
            mimeType = "text/css";
            break;
        case EOT:
            mimeType = "application/vnd.ms-fontobject";
            break;
        case WOFF:
            mimeType = "application/x-font-woff";
            break;
        case JSON:
            mimeType = "application/json";
            break;
    }

    WebResourceResponse response = new WebResourceResponse(
        mimeType,
        "UTF-8",
        parentEngine.webView.getContext().getAssets().open(assetPath)
    );
    return response;
} catch (IOException e) {
    e.printStackTrace(); // Failed to load asset file
}}

Configuration finished in Cordova, now in your external web design, you add the following call, in the index.html (if applicable):

<script type="text/javascript" src="**injection**www/cordova.js"></script>

This way, your web project can access the Cordova Apis. I tested the inAppPurchase plugin and it worked fine.