Develop Reference

Communication between Ionic app and WebPage, both in JavaScript

I've come across kinda difficult issue for me.
In project where I work currently we have web application written in react + javascript. It's usable on desktop and tablets. On tablets it also uses functionalities like a hardware camera to take pictures and here comes the issue. Now what we have on tablets is web application in react + js and it's put inside a webview two applications - one for Android and one for iOS. That causes a problem because we need two applications that do the same thing, also it requires knowledge of Java and Swift (which is kinda problematic, since all of us are pure frontend developers). So we decided to rewrite that native application to something similar to our frontend that also will have one codebase that will run on both Android and iOS.
Before everything, I'm totally newbie in mobile development.
Right now I've made a small proof of concept in Ionic with React in it (that POC was also checking if we can use the same libraries for scanning documents, which was successful). It was made with a help of that tutorial: https://ionicframework.com/docs/react/your-first-app
I could scan documents and display some data from it and everything worked. Next task was to display our web application inside that Ionic one and there some issue occured.
I've used both Capacitor Browser (https://capacitorjs.com/docs/apis/browser)
const openCapacitorSite = async () => {
const url = 'url to app';
await Browser.open({ url });
};
And Ionic In-App browser (https://ionicframework.com/docs/native/in-app-browser)
const openWebview = async () => {
InAppBrowser.create('url to app');
};
Both opened desired url, it didn't look as good as in our current solution on Android and iOS but it's not that big deal since I can style it somehow. Bigger concern is communication between web app and native app. Currently we have something called web-bridge. Web app is required to be run inside a host client application that supports Web Bridges and it should bind an object to window.bridge. Now it uses two API's.
Native Application API
The native application should bind an object to current script context's window.bridge that implements the following interface. This can be done in any language that has a mechanism to bind an object to the browser's script context and has a this bridge capability.
interface Bridge
{
//JSObject eventData ends up being JSON. this is the JxBrowser implementation requirement.
//JSFunction is a function that can be executed on the current javascript context.
public void callHandler(String eventName, JSObject eventData, JSFunction callback);
//This should be used to subscribe a function to an event being called. Each time "eventName" is called via callHandler, this callback should also be called.
public void registerHandler(String eventName, JSFunction callback);
}
Javascript API
sendData - Send data to the host application. This ends up calling callHandler on the Native application's Bridge implementation registerHandler - Register a callback to be called each time a specific event is raised. This ends up calling registerHandler on the Native application's Bridge implementation
The host application expects a consistent format of data. For each command, type is mandatory, other fields vary based on the type of command. For example, the log command is as follows:
{
type: "NATIVE_LOG",
message: "Hello native log"
}
So the issue now it create similar Web Bridge in Ionic app, because the whole flow on the webapp works.

How to use js bridge in chrome custom tab

Google oAuth is not supported in android webView. Google recommends to use chrome custom tab for proceeding oAuth. I have also requirements of js call from my web app to native. How to configure to call native methods from web app using chrome custom tab in android similarly like js interface in webView?
Update 1
This mod Chang marked the post as duplicate but the post is different. I don't want to run any JS in my web app from native. I want to invoke method from web app to my native code via JS interface. Is there any way for CCT?

Based on Can I Inject Javascript Code into Chrome Custom Tabs the answer appears to be no.
Chrome Custom Tab is based on Chrome itself and has the same security model. The web content is only allowed access to the Web APIs (camera, device orientation, etc.) and has no access to the native app. At best the native app can capture a URI.
Even the Chrome Custom Tab documentation state that the way for a native app to handle content:
Some URLs can be handled by native applications. If the user has the Twitter app installed and clicks on a link to a tweet. She expects that the Twitter application will handle it.
Before opening an url from your application, check if a native alternative is available and use it.
Implies that either a native app handles a URL or not. My interpretation of Chrome Custom Tab is a skinnable Chrome component adjacent to the native app rather than internal to a native app like a WebView where a Javascript bridge exists.
Your desire for a Javascript bridge from a web app would mean that there would be a arbitrary way for any website code to interact outside of the web container. The rational as to why that is not allowed is given as the responses in the first link.

Integrate a UI in JavaScript into a UWP app

I am developing a UWP app and I have the UI part of the app developed in javascript. I am wondering if I can embed or integrate this UI javascript in the UWP application, or I need to rewrite the whole UI in UWP. Does anyone know?
Thanks in advance!

There is logic of Webview.
In which you can define URL for your Application and it loads same in a App as if it was an App.
In windows soemthing like thsi
In XAML
<WebView .../>
In class
try
{
Uri targetUri = new Uri(Address.Text);
webView1.Navigate(targetUri);
}
catch (FormatException ex)
{
// Bad address.
}
You ca see more detail here

UWP supports JavaScript directly. You don't have to choose either/or.
You can create a new project in Visual Studio from a JavaScript template and then copy in your existing HTML and JavaScript.
New Project -> JavaScript -> Blank App (Universal Windows)
See Create a "Hello, world" app (JS) in the UWP docs on MSDN.
You can optionally add .Net or native code to your project by creating Windows Runtime Components and calling them from your JavaScript code.
If you prefer to have your HTML/JavaScript as an island inside an otherwise Xaml UI then you can do that by hosting the HTML/JavaScript in a WebView. You can then write the rest of the app in Xaml and your choice of .Net or C++.

It's possible to call an android app content provider from a web page using javascript?

I'm searching about how to expose some functionalities from my android app to a webpage using content provider.
My app stores digital certificates in AndroidKeyStore, i'd like to list this certificates on a webpage using js.

You can do a native app, in java and c++ or an html app with cordova or similar. Content provider belong to native app world. If you need to work with them, i suggest you to build an native app (in java) and do user interface natively.

The best way to do it is using Android WebView and exposing some functions to javascript.
https://stackoverflow.com/a/10389678/2004555

Paho MQTT in NativeScript

I'm trying to use the Poho MQTT library's JavaScript implementation (http://eclipse.org/paho/clients/js) in a NativeScript application.
I referenced the file with require("./lib/mqttws31"); and replaced all the window.timer's with require("timer") statements. I also added require("nativescript-websockets");to the top of the mqttws31.js file after installing the module from github.com/NathanaelA/nativescript-websockets. I also commented out the bit of code referring to localstorage.
I'm getting the application to run, but it doesn't seem to do anything.

you are better off using the webview with nativescript webview interface
for bidirectional control between webpage and nativescript it's more like an advanced ionic or should we say Cordova app