Xamarin.Forms/Asp.Net Core Custom WebView Integration - javascript

I am currently building a pizza ordering app using Xamarin.forms intended for both iOS and Android, and whilst trying to integrate with the payment provider I have encountered a very sticky situation.
Essentially the payment provider (Elavon) provides me a Hosted Payments Page(HPP) where I can send the user to complete their transaction, great. The issue is that when the user cancels a transaction or successfully completes the page will redirect to a page of my choosing, but I have no way of knowing (from Xamarin) when the transaction is complete/cancelled.
So in order to jump out of the WebView I need to call a JavaScript function from the redirected page, that will in turn invoke some C# in Xamarin to exit webview and navigate to an appropriate page.
I have successfully implemented the HybridWebView from Microsoft docs in the past, here:
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/hybridwebview
Ideally I could navigate to a local html page in each of the platform projects as in this example, but I do not think this is possible with just a Url, which is all the HPP accepts (Additionally file locations are different on Android/iOS).
I intended to simply navigate to a webpage that I host in Asp Net core where I can call the invokeCSharpAction method, pass string data back to xamarin, and depending on string value navigate accordingly in Xamarin.
The problem with this approach is that on the web page I get an "Uncaught Reference Error" on the "invokeCSharpAction" and the function in Xamarin is NOT getting called.
Does anyone know if it is possible to invoke a C# action in Xamarin from a web page that is NOT local to the device?
Thanks in advance to anyone who has any ideas, I'm fresh out.

Related

BLE web service disconnects after activity is switched

I am developing a basic web app interfacing the Nordic BLE devkit.
I am new to javascript development and came across a rather common but a weird problem for me while testing my app.
Basically, I have 2 html pages and a common javascript file.
First page finds the nearby BLE devices and connects with it and then stores it's characteristics and services which are needed for the communication. (Processing done in the javascript file)
After a button press on the first html the app runs location.replace("path for second html") and switches the activity to the second html file.
Here I noticed that after transferring to the second page the devkit is disconnected.
I have few buttons on the second page which when pressed invokes routines in the javascript file.
Now since the device is disconnected the characteristics and the services read earlier were lost and the app crashes.
I know this is a typical binding problem but I am quite not familiar with the exact javascript concepts that I need to be looking at in order to have more information for this issue.
Can anyone help me with this?
It is not currently possible to transfer a BluetoothDevice or any of the other associated objects to a new page during a navigation (which is what happens when you call location.replace()). If possible you should keep the user on the same page for the entire time that it is connected to a device.
There is upcoming work on Chromium issue 974879 which will make it possible to keep the permission the user granted your site to connect to the device across navigations and sessions but you will still have to reconnect on each page.

How to post back to server after Single Page Application release/update

I have a SPA Angular website. Whenever we release a change to the website, the user's browser does not go back to the server to get the new javascript files. The app happily keeps running in the user's browser, and while it will make ajax calls for data, the javascript files do not change. This can cause errors if the signature of the back-end API being called changes, etc. If the user refreshes the page, they get the updated javascript files and everything works fine after that.
Is there a way to tell the browser that the site has been updated and to get the new javascript files, rather than just running the app with the same files?
I use the Angular CLI to build the application, so when the website is released, the javascript files have hashes at the end etc. This isn't an issue with files being cached and not updated... it's an issue with the browser knowing that it needs to request the files or refresh the page.
You could use web workers to poll the server for changes and refresh the browser when changes are found.
An alternative to web workers is using setInteterval just refresh after a given time.
Yet another alternative is to have a version number in your API responses, and the JavaScript handlers would refresh the page when the version numbers are out of sync.
You could write a program in your angular code that:
periodically checks the version of the api if changes where made
does the periodic check to ascertain when the user is idle AND when the user is not in a edit page with dirty fields.
refreshes the page when step 2 condition is met
use this library to watch idleness
https://github.com/shawnmclean/Idle.js
If the file udated have the seame name add this text after the "?" like "?ver1.1" is suppose to tell the browser that there is a new version of the file.
you can use manifest file
https://html.spec.whatwg.org/multipage/offline.html#manifests
another way is with
CacheStorage,clear()

Rocket.Chat Iframe integration: browser navigation failure

I am integrating Rocket.Chat to our existing web application, which has a large user base. After successfull Rocket.Chat Keycloak integration (SSO), it was decided to inject chat to the existing application using available iframe integration since it allows sending commands for authentication and simplifies Rocket.Chat events handling.
The actual problem is the fact that, iframe integration breaks site navigation, i.e. klicking browser's back button doesn't navigate to the previous page. Possible solutions available on SO are unfortunately not helping.
Any help is much appreciated!

Facebook Login and UIWebview

I'm currently developing an app that is essentially a single WebView that allows access to a specific website (terrible idea I know, but the decision comes from higher up); said website offers the option to login through Facebook with the standard Facebook Connect procedure.
The login process works fine in Mobile Safari but unfortunately when a UIWebView attempts to do the same thing after authorizing a blank page is displayed and nothing happens. This is of course because of the page actually being just a JavaScript that communicates with the original page through postMessage (I think!).
I tried searching and while this is a pretty widely recognized problem all the solutions I found are either not applicable or won't work. I found somewhere that it's possible to pass mode=redirect to the oauth URL to prevent the whole process to involve popups which sounds promising but as far as I tell it doesn't work.
Is there a way to make Facebook Connect work for a website inside a UIWebView? I'm considering the option of having the Facebook button call a special URL that I would then listen to inside the ap to trigger a native authentication process but unfortunately since my company is not the one developing the website so this kind of solution would be the least preferred.

android url scheme or javascript interface?

I have a html 5 single url based app (written using slingshot), which has features of sending email to a specific date and time based on user requirements. I used android webview to access the app. The email functionality explained above need to be transferred to android local notification. Setting up notification is not the issue, the issue is how to get the web layer json data in my android native layer to set the local notification.
Not sure if I can use javascript interface as i am not going to call any method from my web app. The save button i have in my web app will trigger the json dada which i want to capture in android layer. I was thinking to user intent filter to capture the url scheme but didn't really find any good example as most of the example is showing local html file coming from asset directory. But in my case i have a html 5 single url app (written using slingshot) triggering the data when save button is getting click.
didn't really find any good references stuck here , please help.

Categories