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.
Related
I have an app running on AngularJS and Ionic and I have a problem with state transition with Android devices but not on iPhone/iOS.
One page is quite large and when I navigate from the home screen to this page the header gets loaded first and after 2-3 seconds the actual view changes.
I tried adding ng-cloak to the ion-view but this doesn't solve the problem.
What do you mean by that your view is getting changed? Also in which versions of Android are you facing this problem?
Unfortunately it seems a problem very device oriented. You could try to change some elements to enhance perfomance like changing your ng-repeat for collection-repeat.
The best way you could try to improve your performance in Android comes to the cost of weight in your App. You could try using Crosswalk Webview Plugin. This not only provides you the great webview capabilities where your native webview lacks the performance but also it is providing feature constancy across Android 4.0+ Platforms.
See this:
http://blog.ionic.io/crosswalk-comes-to-ionic/
https://github.com/crosswalk-project/cordova-plugin-crosswalk-webview
I want to know if it's possible to design my android app UI with HTML5 and CSS3.
If it's possible, is there any performance issue?
Android has WebView which can render HTML content, but it doesn't provide the same user experience as native apps so its use is generally discouraged.
Yes it possible. As rhoadster91 stated, you can use a normal Android WebView which loads your "index.html". All your HTML files should be in the "assets/www" directory. But you'll find plenty tutorials out there which explain everything step by step. Have a look at Googles developer site.
A second possibility would be Phonegap. It is a little tool which helps you to deploy your app for various devices (Android, iOS, WP,...) while coding your app only once in HTML.
I experimented with jquery mobile, native application and phonegap. Building a web application at first seemed very attractive at first as the coding is a lot easier compared to native applications. Here is my opinion based on my research:
Using phonegap slows your application responses, it loads slowly and together with jquery mobile the response and load time increases. So I didnot use it.
Using jquery alone was no different in Gingerbread mobile and on emulator you can clearly see the lag in switching between one div to another div. I didnot use it either.
What I did was use android Webview. I wrote my own javascript and css and placed them on the head section of my page. Used div for changing pages on button click. This approach worked really good giving nearly native performance.
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.
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.