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.
Related
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.
So we've decided to create a down and dirty Android version to a working iOS app.
Since we don't code in Java and resources are limited, we thought of creating a responsive web version of the app, that emulates the app's environment more or less, but keeps most of the functionality.
I should note that we haven't programmed responsive web pages before. we know there are media queries and functionalities for many different devices, though.
The idea was to create an Android app that uses a webView which is hardcoded to be a responsive web page. To the user we hope the result should be app-like.
We need the screen to look like this:
so that when the user presses A - the A screen would show, and when B is pressed, B is shown.
A shows a scrollable list of items
B shows a some buttons, pressing these buttons would change a value that is sent via a web reuest.
We need something to help us come up with buttons, presses, screen resizing, events fired...
Is there any framework that we can use to accomplish a task like this?
I was thinking of using jQuery, changing the visibility of the <div>s for the main screen. Of course it would take a graphic designer to make these buttons, and writing it all.
But is there any framework that is made for this? (We need the code!).
there will also be requests that are sent to the server and responses will be in JSON, so display A can be populated accordingly.
We need an answer that would target us to a solution that fulfills this functionality so we can go ahead and code the rest of the project.
Thanks!
Have a look at Ionic, it's a framework that would be ideal for this purpose. http://ionicframework.com/
Once installed, you can use their cli tool to generate an app with an empty tabbed based application like so: ionic start {appName} tabs.
After you've completed your app you can run ionic build android to build the app.
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.
I'm developing an HTML application that uses Apache Cordova to comunicate with iOS. Client requirement is to use the printer functionality to print specific docs. To do so, I've created a custom Cordova plugin that allows to print HTML pages.
The implementation I've followed is similar to Cordova Printer Plugin. But during the testing I've encountered a problem: show the popup that displays the available printers in a specific position. In particular, I have a HTML button that when tapped displays that popup. According to UIPrintInteractionController Class Reference there are three main tasks that enable the presentation of that functionality.
– presentAnimated:completionHandler:
– presentFromBarButtonItem:animated:completionHandler:
– presentFromRect:inView:animated:completionHandler:
My first test was to use presentAnimated:completionHandler:. But this method allows to display the popup from the center of the window frame. My goal, instead, is to display the popup from the button that has been tapped. Obviously this in iOS can be achieved without difficulties but here I have an HTML element within a web view and Cordova is the glue between my HTML app and the operative system. So, how can I achieve this?
Note Within my project I'm using jQuery and jQuery Mobile.
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.