Communication between Ionic app and WebPage, both in JavaScript - 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.

Related

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.

React Native Could not open URL No Activity found to handle Intent

I'm working with React Native and Square Point of Sale. I'm using Web API for Android.
Also I have installed Square Point of Sale.
This is my code:
componentDidMount() {
let url ="intent:#Intent;action=com.squareup.pos.action.CHARGE;package=com.squareup;S.browser_fallback_url=https://my.website.com/index.html;S.com.squareup.pos.WEB_CALLBACK_URI=https://my.website.com/index.html;S.com.squareup.pos.CLIENT_ID=sq0ids-yOurCLieNtId;S.com.squareup.pos.API_VERSION=v2.0;i.com.squareup.pos.TOTAL_AMOUNT=100;S.com.squareup.pos.CURRENCY_CODE=USD;S.com.squareup.pos.TENDER_TYPES=com.squareup.pos.TENDER_CARD,com.squareup.pos.TENDER_CARD_ON_FILE,com.squareup.pos.TENDER_CASH,com.squareup.pos.TENDER_OTHER;end";
Linking.openURL(url).catch(err => console.error("An error occurred", err));
}
This is my error message:
Could not open URL 'intent:#Intent; ... end': No Activity found to handle Intent { act=android.intent.action.VIEW dat=intent: flg=0x10000000 }
What I'm doing wrong?
I tried building using the web API but found that the flow wasn't great. The user doesn't always make it back to the app; sometimes they get stuck on the website.
I built react-native-square-pos to make things easier for the next developer. It uses Native Modules to communicate with the Android / iOS Square PoS APIs.. so you don't have to write Java or Objective-C.
The intent:#Intent that you're using there isn't really going to work from within React Native, since that is used for going from a web browser on an Android device into the Square POS app.
The Android Web API intent is intended to do a hand-off from your browser to the Square POS application, not from application to application.
It sounds like what you'd be wanting to do is use the Square Point of Sale SDK for Android with your React Native application. You'll want to take a look at https://facebook.github.io/react-native/docs/native-modules-android.html about how to link a native module with your React Native application.

Invoke native code from Javascript in Cordova app

I'm developing an universal application using Cordova.
I want to add some features, for example authentication via Touch ID (fingerprint auth). In order to do this it's requested not to use a framework/library from Github/Internet so I want to do it in native code (Objective-C for iOS, Java for Android etc).
My problem is: since my app is a standard client application which uses HTML, Javascript (AngularJs) and CSS, how can I invoke some native code within the app life cycle? For example, if I'm inside a specific page (HTML) of my application, can I call an Objective-C method which implements the fingerprint authentication?
Any help is appreciated!

IronJS / Twilio Browser Soft Phone

I'm creating a Fiddler extension that is simplifying my interaction with Twilio during development. I'm about to release it to the wild, but I would like one more feature before I do so.
I'm able to return the various phone numbers on my Twilio Account, and list them with the various URLS that are required.
I would like to select on of the numbers, and "Click-To-Test" whick will dial the selected phone number. I would then like to interact with my Twilio service via my computer rather than picking up a phone.. I should be able listen to the voice prompts, and interact by dialing 1, 2, 3 etc. when prompted.
Twilio offers this JavaScript library here (Twilio in the Browser), and give an example here via Azure (Twilio in Javascript Application), or here via MVC (Hello Monkey Client)
All of which leverage a Javascript library which creates a Twilio Device on the client side. I'm NOT a Javascript guy (yet, but it looks like that's next on my every growing learn-this-technology list), but I have to think that the same functionality could be implmented in C#.
I've attempted to host the device in a browser control, but I'm not getting to far with it, and the integration still remains on how to pass a select item in C# to a executing Java Script library running in a browser.
I've also looked into IronJS run the JavaScript via the Dynamic Run Time, but I'm not sure if that will work in the end. The Twilio Library looks for a script tag in the web page, and hooks up several event handlers. Running the library in IronJS, causes it to fail as there is no web page, and my Java chops are not up to hacking this piece out.
My question is: Can't this Javascript Library be ported to C#, and create a full client that Twilio sees like the Javascript soft phone? I would think this would not only be helpful for me, but also for Win 8 dev, and Windows Phone 8 Dev as well.
I'm not a C# developer, I believe hosting the JS library in a WebBrowser control seems the way to go (at least much easier than porting the library to C#).
According to MSDN, you can use the Document property to call JS code from your application. For example, if you had this defined in your web page:
function test(message) {
alert(message);
}
You can call it from your application:
webBrowser1.Document.InvokeScript("test",
new String[] { "called from client code" });
Unfortunately, there's not a straightforward path to using Twilio Client in Windows 8 or other Windows desktop apps. I will pass along this feedback that it would be great to have VoIP functionality through Twilio for Windows 8 apps.
The Twilio C# helper library should help with this.
https://github.com/twilio/twilio-csharp
See the blog post below for an example application:
http://www.twilio.com/blog/2012/02/twilio-for-net-developers-part-5-twilio-client-mvc-and-webmatrix-helper-libraries.html
You also linked earlier to a Twilio Client C# code example:
http://www.twilio.com/docs/quickstart/csharp/client/hello-monkey
All of the Twilio Quickstarts can be viewed in C# using the language drop down in the upper right.

Sencha Touch and PhoneGap

You built your app in Sencha Touch, loaded it in a web view wrapper in PhoneGAP.
Now how would your Sencha Touch web app access data from PhoneGAP? since its in a web view?
Example you used PhoneGAP to get UDID, or device contact list etc, how are you suppose to send that to sencha? since its in a webview? Possible? If not what do you do?
An Intent? There is nothing more universal in Android than an Intent.
So Sencha Touch part issues an intent. Your PhoneGap HTML5 WebView catches this Intent. A WebView is still in an Activity. Its just a different type of activity I believe. So the activity webview can processed data/generate data based input or whatever and send out in the bundle of an Intent. Either side could also store in SQLite or SharedPreferences, and just use the intent to notify of the data change or request. Also consider startActivityForResult(intent) to get data back.
First for all Sencha Touch is just the framework you use to build your app.
It doesn't control your application.
If you are using Phonegap as your Webview wrapper. By the way Sencha now also offer a "Native Wrapper".
You would call the various javascript api's which Phonegap will map to its native counterpart. Depending which api you called and if any data was returned you can handle this in a callback.
That's about it, there is need send anything to Sencha as you describe it.
Its more a callback centered just like javascript.
The following links might help you.
http://www.sencha.com/learn/a-sencha-touch-mvc-application-with-phonegap/
http://robertdougan.com/posts/packaging-sencha-touch-2-with-phonegap-cordova

Categories

Resources