is it Possible to Trigger Android Toast Notification from Webpage? - javascript

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.

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.

How to close webview all together in React JS

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.

Prevent Phonegap notification.navigator popups from closing from touch outside of dialog

I am using Phonegap to build an Android application and am running into problems using functionality that is not well documented for Phonegap.
navigator.notification.activityStart('title', 'message');
The above works fine, and using it with activityStop() opens and closes the loading dialog when I need it to. The problem is that if the user touches the screen or hits the back button the loading dialog closes. I want it to remain open until I am done loading a document from a server in the background.
I am running into the same problem with navigator.notification.alert and the other functions of the navigator.notification.
Also, I would prefer to not modify any native code. I know that I could probably edit the Phonegap plugin native code to achieve this, but this application will eventually be cross-platform so I would prefer to not do any native code if possible.
I found a solution which I integrated in my application and it worked.
In java file of notification alert do the following change :
=> go to alert ()
=> dlg.setCancelable(false);
Good luck

How to alert a message in notification area of Android using JQuery

I have developed a tiny browser-based app using Jquery and PhP for Android mobile. How can I alert a message in notification area (top of the screen where I can see the message if app main page is not visible) saying something like "The Process Completed". I don't want to interrupt user, just as a notification or reminder in top of the screen.
Thanks is advance.
You're going to have to use Phonegap AND the Status Bar Notification plugin
You mean the notification panel outside of the browser on the home screen? If your app is just browser based, I'm afraid you have no chance to access anything outside of the browser window.
There are solutions to access such features, a popular example being Phonegap but I'm not sure if the notification functionality is part of it.

Integrating HTML5 into native iPad application

I am trying to integrate a webpage into an iPad application. Something like the Final Hour app where the app is a native app using slideshows. some of the slideshow pages have a small part that is loaded from a website.
The only way I would have known this was when I didn't have internet access the small area where the website loads into said there was no internet connection.
How can I implement something like this? I understand the website aspect but I don't understand what iOS API they use to setup some sort of canvas or frame to hold the website.
Here is an image of the app. The webpage would be loaded into the "blue" box outline.
You are indeed looking for a UIWebView. You need to build the controls yourself if you want your users to navigate in the website. If you just want to show one page, with no Back or Reload button, then you can use it as is.
Note that you should try to make it clear to your users that your app might not work properly if no Internet connection is available.

Categories

Resources