I am building an Android app and I using Traditional WebViews to load the web pages. I was wondering if there is any alternative to WebViews which can make the loading of web pages faster.
I read about https://crosswalk-project.org/documentation/about.html but found that it increases the app size by ~50MB.
Also, it only increases the web loading speed by 10-15% only and is buggy.
If there is no alternative, is there any way to make WebViews faster?
Thanks in advance.
Down vote must accompany reason.
It really depends on the "richness" of the web content that you're trying to load.
The standard Android TextView actually supports rendering a small subset of HTML, by calling setText(Html.fromHtml("This will be <strong>bold</strong> text"));
But if it's anything more complex than that (e.g. tables, javascript, css, etc) you're stuck with a WebView. However, the performance of WebViews should be quite good (very near native speed), unless the web page itself is very heavy and slows the WebView down. You should do some profiling of your web content to see where the bottlenecks are.
If you do not need to interact with the page you can use Chrome Custom Tabs. It includes features to warmup and pre-fetch the page so that it appears to work extremely fast for the user. If you use it this way it is faster than launching an external browser and faster than loading a WebView.
Related
I wrote a web-app with the jquery mobile framework. Unfortunately too often it takes too long until the page is completely loaded (average time around 4-6 secs) what makes the usability horrible.
Using destop browsers there's almost no waiting time. Newer phones or tablets are acceptable refering to speed.
Server-sided processing (like db queries) running fast using c3p0 connection pooling. So I exclude that this could be the problem why page shows delayed.
Sometimes it also takes too long until success-method of an ajax-call is triggered.
Do you have any suggestions what I can do to get a better performance? I'm using a "multipage" template which means (if I'm not wrong) that request redirected from Spring-Controller calls suited jsp (Resolver) as view to open. All logic coming from spring controller attributes are integrated in jstl-tags in the jqm-page. I don't know if this is a good approch, but corresponds to classic web development.
In case I won't get a better performance, is it recommendable to develop a native app for android and ios if the app is often used? I read that web apps are a solution for websites that are now and then visited by their users but not in steady use by them. Does maybe an hybrid approach cause a better preformance?
As described here:
If you're using a single page template, but would prefer to lazy load in a few key pages in the background to avoid seeing the Ajax loader, we recommend using the pre-fetch feature instead of moving to a multi-page template. To pre-fetch a page, simply add the data-prefetch attribute to any link and jQuery Mobile will lazy load this page in the background after the primary page has loaded. Here's an example:
<a href="foo/bar/baz" data-prefetch>link text</a>
As we are now a days fond of bootstrap css which helps in compatiblity. My question is how exactly it deals with the loading as we have more load to the desktop apps and less to mobile. So according to me the css is handling through #media-screen object stylings with toggling of display and alignment. But even if we control the display from client side css or js. Server side will do its task of loading, So whether both desktop website and mobile website are taking the same amount of dataload.
Why am i asking this is if there is same amount of dataload, ill rather choose Android app instead of bootstrap for the fast performance.
Its important to remember that Bootstrap is a client side framework for helping to create responsive websites. You're right in that the same amount of stuff will be sent down the pipe regardless of the device that is used. This is true for any website that just uses client side frameworks to render for mobiles, such as jQuery Mobile.
If your application is big and complex then you may be better off serving up a different page for those mobile devices using Server side technologies. We use the Microsoft .Net stack which can render different views/scripts/css depending on a number of parameters to do with device. You can still use the Bootstrap framework, but maybe render less in the DOM, or have a smaller version of Bootstrap. You could even try a different framework such as the super tiny Pure framework.
Another alternative like you said is to build a native app. This will generally (if you make it right) be faster that what you can achieve in the browser, but you need to be careful that it is actually providing something useful to the user to encourage them to install it. If you are just using it to make it easier to make your website then you're doing it wrong, but if you are building a highly complex app that can leverage some of the extra functionality you can use in a native app then it may be a good way round it.
Without a real question there isn't a huge amount more than my own experience to draw on here, and there is no real right answer to how you go about it, but in answer to the question of how it deals with loading, client side frameworks can't really change what is being loaded without serious customisation or using some server side technology to deliver different pages altogether.
I am currently developing a native android app. My app has a lot of activities. I want to develop native android app. But in some case, I want to use a webview where the entire layout is just a webview. Not linear or relative or another layout, just a webview. All of the images and other things running in HTML. All of screen will run in HTML5.
So, I can partially transfer my app into iphone app or other platforms. This is the benefit of this way to me.
But I don't know. Is this way better? What will the performance be? What is the disadvantages of converting to an HTML5 app?
Can you explain?
There is a very good presentation about this very topic.
Performance: You are adding an additional layer in between, A webkit engine cannot always match native (and sometimes hardware accelerated) rendering performance.
Disadvantages: One is that the API use is limited, you can bind a page's JavaScript to Native code, but not all functionality is available.Though you might want to have a look at capabilities of Cordova project. Another is that emulating complex widgets via JavaScript will slow down the page.
Portability: Indeed is a great advantage, that's why PhoneGap and Cordova are popular. Though many like Facebook App etc have switched to native App for better performance.
The approach you require actually depends on your requirements. This may be my personal rant but IMHO: a markup can be only twisted so far, it can't out-perform industrial grade GUI programming setups as of yet.
Cons WebView
Can't use full performance of device, Since web view form an extra layer.
Web view can't listen all user event.
You can't fully share or save data from your web view to app.
Take more time to load. Other we get all things in a simple API and can be rendered.
Changing a simple fields in page need to load full page again.
Online required, can't extend offline features.
Orientation changes and full screen make difficulties.
Pros of using Web view
One page for both android and IOS.
I think the main advantage is the ability to make changes without the need for each user to update the app on his device, because all the pages are on your server.
No wait for app store approval for updation.
Some Techniques
Native elements TOGETHER with WebView. I think it will be much better, as there are a lot of functions that can't be done with WebView only. The combination of the two is much more recommended.
Rendering from locally, Create an assets directory for HTML files – Android internally maps it to file:///android_asset/ (note singular asset). So you can feed your web view form locally even if you are offline.
I think -by using this way- your app quality will be weak and app will be hard to use because the webview object not having a lot of tools that you can make it be compatible with android. e.g you can't share or save data from your webview to app. whatever that reference on your app what need and what dosen't need, by the way i tried to develop an app with html but it was bad.
WebView does have many html5 features but lacks performance needed to
display dynamic content. Are there any other bare bone web browsers
better suited as a platform for web applications on Android?
Here is a simple example which performs extremely bad on my device and
the emulator:emphasized text
http://themeforest.s3.amazonaws.com/116_parallax/tutorial-source-files/tut-index.html
transition animation nearly freezes
hover effect in navigation lagging (when using a mouse)
Why Don't you try chromium_webview. It has diverse features plus better performance. Here is link of this project on Github.
1
Which one method is faster to open and use HTML5/jQuery Mobile page in android device?
Use Phonegap or just make normal activity with WebView? Page is in assets folder and App doesn't need to use any hardware component. It's just list of different web page links. And Every link should open second activity and open the link in WebView.
2
Someone says that Sencha Touch is faster than jQuery Mobile and someone else says that jQuery is as fast but much more stronger because there is more abilities to do. So which one is more recommended. Or is it only what you like is better? (Like it really doesn't matter which one you use)
jQuery is much more easier to start if you don't have experience about web coding. Am I right?
Which one method is faster to open and use HTML5/jQuery Mobile page in android device?
Use Phonegap or just make normal activity with WebView? Page is in assets folder and App doesn't need to use any hardware component. It's just list of different web page links. And Every link should open second activity and open the link in WebView.
Normal Activity with Webview will be faster then using phonegap because phonegap takes more time to get the document to be ready as compared to Native thing.
Someone says that Sencha Touch is faster than jQuery Mobile and someone else says that jQuery is as fast but much more stronger because there is more abilities to do. So which one is more recommended. Or is it only what you like is better? (Like it really doesn't matter which one you use)
jQuery is much more easier to start if you don't have experience about web coding. Am I right?
Yes you are right Jquery is much more easir then sencha touch. I use jquery mobile and its awesome. Although Sencha is little bit faster but i will recommend you to use Jquery mobile. :)
In general yes JQM is a lot easier to learn. I've spent about a week now looking through Sencha and if you don't know EXT.js it seems pretty complex. Even the demos are confusing and it seems to be way more programmer oriented in the way things are constructed versus design oriented.
I'm also looking at netbiscuits tactile - but I haven't spent enough time looking at that yet.