How to close webview all together in React JS - javascript

I am making a website in React JS.The website will work like a webview as it will be attached to android/IOS application.
In the website i have a cross button.
On that button press i want to trigger native bridge event which will close whole webview all together.
Let me know how can i achieve same.
Thanks in advance.

Mhmm, android and iOS are creating a special object on window when loading a website in a webview.. in Android it is called window.android, in iOS it's window.webkit and a special userAgent agent which matches like
navigator.userAgent.match("CriOS") === null // detects chrome on iOS
In Android, it is possible to create "callbacks" on this android object which can be called from the websites ReactJS code like:
window.android?.share(content)
In iOS, you can go with messageHandlers and it will look something like this:
window.webkit?.messageHandlers?.showSharing?.postMessage(url)
I cannot show you the native App code for these two examples as i'm the Frontend-Developer in our company and not the App-Developer ^^
But, i would assume that's the way to achieve this. You need a way to call a method directly in your native app code to have the ability to actually close the webview - the website itself cannot achieve this.

Related

How to trigger native screenshot function of iOS and Android via JavaScript?

I am currently working on an Ionic Vue App and want to take a screenshot of the entire page. Since I have multiple canvases with different context types on the screen, famous libs like 'html2canvas' do not work for me. The cordova plug-in also was no success for me sadly.
Is there a way to trigger the native screenshot function of a device via JS? The taskbar at the top as well as buttons at the bottom are allowed to be visible on the screenshot.
My app is not designed to be used on PC, so I do not have to worry about this platform.

Open iOS app from a Safari without "Open in <app>" prompt

I'm trying to open the app from an HTML page. It's working well, but I need the app to open without asking the permission from the user.
Currently, Safari will ask the user that "Open this page in myapp". I don't want this message box.
How I can remove this message from Safari? I'm using an URI scheme to open the app. It looks something like myApp://domain.
You can't avoid the dialog you mentioned while using Custom URL schemes. This is iOS feature.
Instead you can use Universal Links to open your iOS App without additional dialog. You need to have control over iOS App to make this happens.
To simplify Universal Links setup, you can use one of the companies that can setup most of it for you. I am working in Firebase/Google https://firebase.google.com/docs/dynamic-links/ . Other answer mentioned company that will do this for you as well.
Try branch.io? It works with Android and iOS.

is it Possible to Trigger Android Toast Notification from Webpage?

Right now in web pages I sometimes want to send an alert to the user, saying that an Ajax request was successful or unsucessful. Using Javascript's alert() function works, but on Android it's a large popup that the user has to interact with before continuing.
Some apps trigger a different sort of message. It's a gray rectangle with rounded corners. It appears near the bottom of the screen and is unobtrusive but noticeable.
Is there a way to trigger this from Javascript?
Edit: I'm running a website, not an HTML5 app, and I don't need the undo functionality, just the messaging.
It depends on whether you're running a JavaScript/HTML5 app that uses WebView on your android device or if it is just a website.
If it is the first case, then there is a way to show native Android toast notification using Android JavaScript interface. This exact problem is solved here in Android WebView documentation.
In case you're running a website and you want it to look native on android, you will have to implement a notification on your own and style it so that it looks similar to native toast notification. You can use jQuery UI tooltip with custom styling for that purpose, for example.
You can achieve this by using JavascriptInterface callback in your android code.
This allows you to call android function using javascript, where you can call the function to display your toast.
See this documentation.

How to find out if WebView is displayed/onscreen/visible using JavaScript

I have a webpage that "plays a video" using sprite sheets. The page is mobile-optimized, so it can get loaded into Android and iOS WebViews. I'd like to know is when the page is visible so only after that I can play the video. I don't want users to catch the video mid-stream because the WebView lags in presenting itself.
I can see some developers might wait until the whole page has finished pulling in all the assets from the page before making it visible to the user. So, I don't want the "video" to start before that time. I can't rely on window.onload because that event fires even when the WebView isn't onscreen or visible.
How can I accomplish this from the client side, with some JavaScript, preferably?
[Edit] To be clear, I'm implying that I don't have any control over the native WebView. You can load web pages into a WebView that isn't onscreen and push the view or add it to the on-screen layout at a later time. My issue is that when my webpage's URL is loaded into a WebView, I can't tell when the WebView comes onscreen.
Take a look at the Safari Web Content Guide. Scroll down to the Supported Events table. I am thinking (or hoping) that the pageshow event will do what you are hoping for. There is also the focus event.
Looks like using these events for mobile Safari would be as easy as
<body onpageshow="onPageShow();">
I am less familiar with Android, but I will look into it real quick.
EDIT: The onpageshow solution should work the same way in Android 2.2 and above as it does in iOS 4.0 and above. As for whether it works the way you need it to, I am not entirely sure. Let me know!
It is not possible to control the webview using JavaScript. If its not too late to change the design of the app, using native APIs will give you more control of the webview.
You could insert a timeout in the webpage before loading the video. It might be worth a shot.
you can use phonegap library:
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
// Now safe to use the PhoneGap API
}
phonegap is very good for handle events and more action in webview.

How does google show this special iOS advert?

Hi all sorry if this is repost. I really searched but can't find anything on it.
I always see this special ad when I use google services on my iphone or ipad. This little window animates out looking like a chat box. I can detect iOS device using user agent but how do I make the advert appear like google does? Specifically, try to open google maps.
I would like to use a window like this when users use iOS device to access my website. It is the most elegant way to tell iOS user about your app while not annoying them with some roadblock each time you try to access with iOS device.
Here is an image of what I'm talking about:
You can use this Javascript: http://cubiq.org/add-to-home-screen
I don't know whether this is your expectation, When your page has access from any iOS device, you wanted to bring up that dialog in webpage Right?..If That is the case then just retrieve the os info and make check there and do your presentation as you want.

Categories

Resources