javascript – What is your experience with Android webapps (limitations, tips, best practices)?-ThrowExceptions

Exception or error:

Update:

As Fran├žois mentioned, there are alternatives such as Phone Gap for a more cross-platform approach. It’s a very good suggestion indeed. I’m open to any suggestions and I would really appreciate if I can learn from your experience.
Sidenote: A web-only app is not high on my list of options, since I do want it to be on the android market.


I’m about to start porting a facebook app to android and I’m debating whether I should write it as a native app or as a wrapper for a glorified WebView.

How is your experience? What limitations did you face when writing a webapp? Do you have any advice you may want to share? Maybe you think that a native app is the way to go instead?

To set up a famework for the discussion, the app I want to port right now is a simple
fb app, in which the server is hosted in Google App Engine (written in Java, if that matters), and all the client code is html, css and javascript (with a good amount of jQuery).

The app is basically a two player, turn-based game, with a bunch of static images that respond to user clicks, and a very simple chat box (independent of fb chat). It can handle several concurrent games for each user (but to different opponents, not the same).

Do you think is a good fit for an Android webapp?

Thank you in advance.

PS1: By all means, I will appreciate any insight, so please do not limit yourself to this specific example app should you want to be broader in your answer.

PS2: Yes, I read the “Best Practices for Web Apps” page from developer.android.com, and I followed the links there, but it does not say much about speed or reliability of the WebView component, specially in terms of user interaction. The question comes after reading the following paragraphs in the WebView description page, which kind of limits the typical scenarios quite a bit:

A common scenario in which using
WebView is helpful is when you want to
provide information in your
application that you might need to
update, such as an end-user agreement
or a user guide. Within your Android
application, you can create an
Activity that contains a WebView, then
use that to display your document
that’s hosted online.

Another scenario in which WebView can
help is if your application provides
data to the user that always requires
an Internet connection to retrieve
data, such as email. In this case, you
might find that it’s easier to build a
WebView in your Android application
that shows a web page with all the
user data, rather than performing a
network request, then parsing the data
and rendering it in an Android layout.
Instead, you can design a web page
that’s tailored for Android devices
and then implement a WebView in your
Android application that loads the web
page.

How to solve:

I have implemented two projects that use webview, one is with jqtouch and other with jquery-mobile frameworks.

You are starting like a breeze and go on, but at last when you look at the application it is very far from native user experience. Android browser is much more slower than iphone browser. Hope it will be resolved later, as a result you will have slower response times when you are dealing with css3 heavy applications. While developing in emulator, webview will make you mad as it is sooo slow.

If you want to implement native like elements or fixed tabbar you are working a lot and at last not getting a good solution when you compare your application with native applications, it just sucks.

At last I have decided to learn native development and being a first class citizen. Of course this will take much more time but the result will satisfy me.

I think native development is not the future, sometime later we will write html-css-js applications again and they will work like native code, but it is not likely to be in 2-3 years according to my opinion.

I can suggest you that, try building web apps, if performance does not satisfies you like me, then switch to native development.

###

I would choice with those rules in this preference order

  • Full web if you do not need to limit to android
  • Phone Gap if you want other smartphone platforms.
  • Full native if you need contacts, high graphics, or any native component
  • webview if you want to be on the market and maybe gain some money
  • Hybrid (native with webview) if you want to mix approaches

###

After my experience with the WebView, I find it to be fantastic. I had built an app and wanted to port it to Android, but the second I realized WebView was working flawlessly, I never looked back. All of my functions were built into the Web App and thus there was little need for function in the app (Internet connection detection/changes, etc)

I’ve gone the ‘Hybrid‘ route. I have a select few features you get through the Android App that the website doesn’t offer — so keep that in mind for marketing.

Either way, my only issue is the scrolling speed can stutter when you are using heavy CSS3 styling — and I’m talking border radius’, shadows, gradients, etc, all over. I wanted to see how it responded… but yeah, besides that, you should be golden!

Good luck!

(edit) Added the Following: I also wanted to add that my app uses jQuery in the WebView. It seems to stagger more than a native animation would, but that’s pretty much a given. Though don’t get me wrong, they still are animations and still work great! If I could give the jQuery animations a FPS (slide up/down), I’d say they’re about 20 while native animations are a fluid 25-30 (on a scale from 1-30). Noticeable, but doesn’t take away anything from the experience.

Again, don’t get me wrong here it’s perfectly good to use! For example, I have a timer that starts when the page loads and counts down… this works perfectly from within the App > WebView. No bugs, and if there was one, it was reflected on the website (aka jQuerys fault)

Just wanted to add some more to my 2 cents =)

###

If you have animations using Javascript, some weird things may happen.

I’ve used a WebView to show graphics, having a mixed approach, and sometimes hell broke lose, a line above or bellow made difference when it wasn’t supposed to in the code logic…

The mixed approach, with Javascript calling Java methods, can be done, but it is tricky sometimes.

Personally with my reduced experience i tend to prefere always native. It’s faster and you don’t have problems that you have within a browser rendering either with redirections or javascript.

Personally i would only use the non-native approach if i was developing at the same time for several platforms (iOS, Android..) and didn’t have the time, resources or pacience to develop native for all.

###

Currently the Javascript interface is horribly broken in 2.3, so you may need to work around it.

Beside that I have to say I’m pretty disappointed with the issues I find in creating complex layouts natively. Sometimes I wish to go back and do everything inside a WebView.

The disadvantage with HTML+JS development is that… it’s JS :). You don’t have static typing so debugging may be harder in some situations.
(oh, by the way, also OnConsoleMessage OnJsError and so on are horribly broken on some phones)

###

Appcelerator Titanium is another option if you are considering cross-platform native apps.

Leave a Reply

Your email address will not be published. Required fields are marked *