In my application, i have some external urls to load, for which i am using a custom webview. but the performance of this webview is very very slow. If i open the same url in native android browser, it works fine. but in the webview, it just takes a lot of time to load the page.
Is there anyway that the performance of a webview can be enhanced in terms of loading a webpage time? Help is always appreciated.
Usama, WebViews will be little slower than the browser as here every activity has to have a callback to the Android app layer.
Having said that, see if you can disable javascript (if it's not used in your app) and more importantly check the caching behavior in the webview that has been set.
WebSettings has some methods related to caching like - setAppCacheEnabled, setAppCacheMaxSize, setCacheMode etc.
setDatabaseEnabled, javascrpt, loadImagesAutomatically are other properties that might impact the load time.
Related
I am developing a hybrid android app, where each click on the link opens a new activity with a new webview. The Android webview takes a lot of time to load even if the resource are cached in the local directory. I want to reduce this time as much as possible to give a good user experience.
The things that I have tried so far -
WebSettings
settings.setRenderPriority(WebSettings.RenderPriority.HIGH)
Webview LayerType
if (Build.VERSION.SDK_INT >= 19) {
webView.setLayerType(View.LAYER_TYPE_HARDWARE, null);
} else {
webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}
Hardware Acceleration
<application android:hardwareAccelerated="true" ...>
Some other popular companies that have hybrid apps are Amazon & Quora. But they use third party libraries. However I am interested in knowing how can we achieve the same speed with android webview.
You should have a look onto project cross walk it is a web view made specifically for building cross platform hybrid apps although it's size is kind of big it will save you a lot of time targeting different web views since you are coding and testing using just one browser which is the cross walk's webview
You may put your WebView into a fragment then preload this fragment on activity start but as hidden. Then when needed show it with new content. This eliminates load time of webview but not the content of it.
I am investigating writing an HTML version of a native-tablet app (Android) that a research facility uses to test user response time. That is: a screen is presented for a set time and then the time it takes a user to choose a response is measured.
What would be helpful is to know is whether this is as easily done via HTML as via native code — I need to know exactly the time between the presentation of a screen to a user and the time they touch for a response. Since HTML rendering is under the command of the browser, is there are way to know — very precisely — when the screen is actually rendered to the user, and hence when the timer should start? My thinking is that it might be best to do something like set a div state from 'hidden' to 'visible' — or to use an animation library such as Greensock, but I feel this could be "every problem is a nail when all you've got is a hammer" — that is, these are the tools I know, I don't know whether these are what I should use.
I'm trying to get a sense of whether this is feasible — I've not done any native code tablet development, have done a fair amount of HTML, need to convince them to switch if I'm going to do the work. Thanks for any info you can provide.
Maybe you could use javascript & JQuery in your HTML page to record the exact time of loading?
$(document).ready(function(){ //notice that $(document).ready is JQuery
// Your code here
});
I guess you call native Android methods via javascript in you WebView, but if not you can do so by first injecting your Object containing methods to be called when page is loaded:
WebView webView = (WebView) findViewById(R.id.webview);
webView.addJavascriptInterface(new WebAppInterface(this), "Android");
Then, the JQuery code above to notify a Java Object would be:
$(document).ready(function(){
Android.documentReady(); // method to call in Java Object
});
Notice:
This is highly experimental and I do not know whether it is a good idea to load JQuery into your WebApp, but as JQuery is used everywhere it should not be a problem.
Anyway, $(document).ready(function...) is called when the document/html page is fully loaded - doing a similar "listener" in standard javascript is not recommended, but possible. (more info if you want to skip JQuery; https://stackoverflow.com/a/7053197/3911640 )
More info about using JavaScript to call native Android Objects: http://developer.android.com/guide/webapps/webview.html
EDIT:
You could also do this with HTML5:
<body onload="Android.documentReady()">
Notice:
Not my area of expertise and not tested, but practically possible. I'd advice you to research which way is the fastest most reliable, but in theory both should be invoked when everything (images etc included) is loaded and presented to the user.
W3C documentation of the HTML5 functions: http://www.w3schools.com/jsref/dom_obj_event.asp
First, a disclaimer: i'm completely new to iphone, android or any mobile development. In the other side, i've been developing websites (php, javascript) for long time.
I have a website which is adapted for mobile and works great. But, there are some features i need such as prevent the screen from dimming (my site is designed to be used for many hours without user interaction while being permanently visible or for example being able to send notifications (with sound, etc., to attract user attention)).
This has lead me to consider a webview. From what i've seen, it's about creating a native app which just a webview (browser without toolbars) and using html and javascript to operate. It will use some native functions to perform some native actions (such as the ones i want).
I've searched around and i don't have a specific response to this: can i tell a webview to, permanently load the content from a remote site ? i mean, my site is php based (zend), with many jquery content manipulation. Can i tell him something like LOAD htp://www.mysyite.com and let him do everything else from it ? absolutely no local content applies, everything is remote. The webview would just be an "interface" to the website.
And additional question is: can i use jquery on it ? ajax calls ? geolocation ? i mean, in a browser i can, i just wonder if inside a webview i can.
I've read that phonegap does this. But most of the time, when taking about phonegap and about webview i general, i read people talking about loading locally the page not remotely in a permanent basis.
Finally, yes, i will build a native app in the future. But now, i simply don't have time to learn about android, ios and blackberry at the same time. Thanks a lot for your responses.
For Android only:
Can i tell him something like LOAD htp://www.mysyite.com and let him do everything else from it ? absolutely no local content applies, everything is remote. The webview would just be an "interface" to the website.
Yes, of course you can. Suppose you have a webview in an activity (it's really easy), you would load the web page something like:
WebView myWebView = .... // get a reference from XML or if you just created get its ref
myWebView.loadURL("http://www.mysite.com");
I would start with this API Guide article. Also, taken from WebView JavaDoc:
A WebView has several customization points where you can add your own behavior. These are:
Creating and setting a WebChromeClient subclass. This class is called when something that might impact a browser UI happens, for instance, progress updates and JavaScript alerts are sent here (see Debugging Tasks)
Creating and setting a WebViewClient subclass. It will be called when things happen that impact the rendering of the content, eg, errors or form submissions. You can also intercept URL loading here (via shouldOverrideUrlLoading()).
Modifying the WebSettings, such as enabling JavaScript with setJavaScriptEnabled().
Injecting Java objects into the WebView using the addJavascriptInterface(Object, String) method. This method allows you to inject Java objects into a page's JavaScript context, so that they can be accessed by JavaScript in the page.
Please be also aware that the webview is not that powerful as the phone's browser. Here is a SO thread where a friend posted an interesting question. You might find helpful the answers he got.
I don't quite understand the cordova plugin procedure.
I found out that it works through the Cordova Webview, but I don't know which
functions and classes are necessary.
It would be great if someone had the time to explain it, a sequencediagramm would be the best for understanding.
greetings, Kurt
This may help you to understand more:
Using WebViews
A WebView uses the same rendering and JavaScript engine as the browser, but it runs under the control of your application. The WebView can be full screen or you can mix it with other Views. The content for your WebView can come from anywhere. The WebView can download content from the web, or it can come from local files stored in your assets directory. The content can even be dynamically generated by your application code.
and
Android WebView, Javascript and CSS
I have come across some situations where I had to use a WebView to display some HTML content. Displaying HTML content is pretty straight-forward. But when it comes to controlling the web view, it gets a little complex. Things like showing alerts, manipulating divs and controlling the activity (closing/finishing). This example shows a few techniques that will get you going with Javascript and CSS with WebView.
Suppose I want to write an app for Android OS that is not going to be a real-time game; that is, it will be a turn based game (requiring internet access) that is based on forms and pages.
I'd like to use HTML5 to do this, and simply have a WebView on the native app with some bindings to the website's javascript, etc. for more functionality (if needed). Of course, since this is not a realtime game, performance doesn't seem like it would be an issue.
The only real reason I can think of to not use HTML5, is because there would be loading times in between forms e.g. every time a user clicks on a button to perform an action that transitions them to a new form, which is actually a new web page, that web page must be loaded. If I did this natively using the Android SDK, the loading of the forms would be seamless and instantaneous (even though the web up/down will take a small amount of time, but that is expected).
Is this a real issue? Are there ways around it that don't involve using the Android SDK instead of HTML5?
A couple of ideas:
1) Bundle your HTML with the app in the folder called assets and load it from there with an URL like file:///android_asset/your_path.html. This will reduce the time required to load because the content will be on the device.
However, beware of the following webview bug in Android 3.0+ that causes any URL with # or ? to fail to load from the assets folder:
http://code.google.com/p/android/issues/detail?id=17535
2) You can also choose to use AJAX to reduce the page load time. You load the heavy libraries once in the beginning and then use AJAX for subsequent page loads to avoid loading a lot of JS stuff. But beware of the bug above, since AJAX page loads use # in the URL.