http://www.developer.com/ws/android/programming/fine-tune-web-apps-and-websites-for-android.html

Back to article

A Crash Course in Android Web Applications


September 6, 2011

Most of the time, we focus on about developing native Android applications in Java. However, there is another, important way to reach Android users that we don't often talk about: Web applications. There are two ways that users can consume Web applications on Android devices:

  1. Using the built-in Browser application (or an alternative browser the user installs)
  2. From within native Android applications that use embedded WebView controls

A WebView control is a configurable control that you can include within your user interface that allows you to load and display Web content much as a browser would.

Why a Mobile Web Application on Android?

Web applications, in general, have a number of benefits over native applications. First, they tend to be cheaper to develop, because there are a lot more Web developers in the world than mobile developers. Second, they can be updated on the fly, making them more flexible to roll out updated content to users. Third, Android Web applications are written using well-established Web standards, which are generally supported across many different mobile platforms, so you can write once, and run just about everywhere. Finally, you don't need to worry too much about supporting different devices, since they all use basically the same browser.

There's a lot of existing knowledge and methods for supporting different browsers, but the Web browser, as a platform, is basically the same. When looking at just Android devices, the Web browser really is the same.

Why Develop Native Android Apps?

Native applications have some distinct advantages over pure Web applications. Native applications have higher performance, the ability to function without a network connection, are tailored to the specific device and have access to the underlying device features and functionality not accessible to a Web application. Accessing device features not exposed to Web applications requires the use of the Android Java SDK. On Android, native applications have access to many easy mechanisms for supporting alternate resources.

Hybrid native applications that use WebView controls help bridge this gap, often providing more benefits than drawbacks. For example, you get the benefit of having local resources, native access to the SDK (see below), and exposure on the various app stores available to promote your content. You can even use the native interface to speed up particular portions of your application that may not be very fast in pure JavaScript. The main drawback of this approach is that, unless you have separate designs for each platform, your application may not feel like other purely native applications, in terms of consistency of native controls (menus, fragments, widgets, and so on).

Which Android Devices Support Web Applications?

All Android devices support Web applications, be they consumed through the Browser application or embedded in native applications using the WebView control. The Android Browser is based upon WebKit technology, upon which popular browsers like Google Chrome and Safari are based. The WebView tool uses the WebKit rendering engine as well.

Some minor updates to the Browser and WebView control have been included as Android devices have evolved. Android 2.2 introduced detection and customization of content based upon device screen characteristics and motion event handling. Android 3.0 introduced private browsing sessions.

Android devices can render Web content with JavaScript, CSS, HTML5, etc. Exactly what features are supported is not strongly documented. You are highly encouraged to use feature detection in your JavaScript.

Devices running Android 2.2 and higher can also display Flash, now on version 10.3, provided they have installed the appropriate Adobe player installed.

Speaking of Flash, Adobe also supports Android as a target of Adobe AIR applications. Like a native Web app, Adobe AIR applications install as their own app, but are Flash apps using the Adobe AIR platform. In order for Adobe AIR applications to run, the user's device must have the Adobe AIR app installed.

Fine-Tune Web Apps and Websites for Mobile Devices

Most mobile platforms include browsers these days. Websites, on the other hand, are really feature-rich. They tend to be media-heavy, with complex style sheets, tons of graphics, videos, sounds, flash and ads, not to mention text. These websites are easily consumed from a laptop or desktop computer, where users tend to have reasonable screen sizes, dedicated high speed data connections, and full-sized input devices (you know, like real keyboards and mice). Mouse hover actions are common, as are multi-column content (like in a newspaper) and complex site navigation suited to big screens.

Mobile browsing is different. Devices tend to have much less processing power and slower networks. Screens are small and narrow. Navigation is generally achieved by using finger tapping and swiping motions--the touch paradigm. When developing Web applications, these differences between traditional browsing and mobile browsing need to be recognized and addressed.

Generally, this means that you will design a special version of your website or Web application specifically for mobile users. Your Web server can use incoming browser information to direct mobile users to a special mobile site using server-side redirects. You'll also want to focus on using mobile Web best practices.

Which Browsers Are Available on Android Devices?

Most users will stick to the default Browser application that comes installed on the device. However, manufacturers and mobile carriers sometimes modify the browsers installed. Also, some users will install third party browsers on their devices.

The performance characteristics and features available on these alternative browsers vary. Some popular third party browsers available today include:

Fine-Tune Web Apps and Websites for Android

Whether you have an existing Web application or are considering developing one that Android users might be interested in, you'll want to start by trying to load it up on an Android device and seeing how it performs. Most of the changes you might require will be obvious once you start poking around. You'll also want to check out the Web Apps Development Guide available on the Android developer website, which can give you some Android-specific tips and tricks as well.

While some methods of producing Web applications ignore screen size or allow the user to size content as they see fit, some Web application developers will still be concerned with how graphics look and getting images and text to look good. There are several techniques that can be used from the JavaScript and CSS to make images and text to look as best as possible. Depending on whether the Web application is running in a WebView or not, and what other sorts of compatibility layers may be in place, the method you choose will vary. Some options include using the viewport meta tag in the head of your Web document, targeting images to specific densities using CSS or JavaScript. These techniques are discussed in further detail in "Targeting Screens from Web Apps."

Write Web-Enabled Native Applications Using WebView?

If you want to develop a native application that loads and displays Web content, then you'll need to learn how to develop Android applications using Java and the Android SDK. You can begin by downloading and installing the latest Android SDK and tools from the Android developer website.

Once you have designed your application, you'll use WebView controls within your layout files to display Web content, be it locally sourced or on the network. You can then create JavaScript interfaces, written in Java, to provide the "glue" between your Web content and the native Android Java application. You could, for example, create a website with a button that triggers the device to launch the Camera using the appropriate Android APIs. Keep in mind that when you start opening up the device by adding JavaScript interfaces, you are making the device more vulnerable to exploitation.

The WebView control is quite configurable. By default, it renders simple Web content, but all bells and whistles are disabled. You can enable Web settings like JavaScript, plug-ins, zoom controls, and more. You can react to user events like key events, touch events, trackball events and focus changes. You can enable or disable secure or private browsing. You can have a single window or multiple windows. There are numerous other settings. You'll want to begin by looking at the WebView class (android.webkit.WebView) as well as the WebSettings class (android.webkit.WebSettings). If you're building a Fragment-aware application, you'll also want to look at the WebViewFragment class (android.webkit.WebViewFragment).

Want some information about Browser application searches and bookmarks? Use the Browser content provider.

Web Application Frameworks Can Help

If you want access to native SDK components, but don't want to spend the time writing the interfaces yourself (or maybe you don't have time or resources to learn Android for a simple project), open source projects like PhoneGap can help provide this functionality. This is especially useful when you want to develop cross-platform Web applications

Conclusion

Android users can consume Web content through the Android device Browser application or from within a special native control called WebView that can be embedded within a native Android application written in Java. There are many ways to incorporate fresh Web content into your applications, or bring your existing Web applications to new mobile audiences like Android. As usual, we'd love to hear how you're considering using Web technologies in relation to the Android platform. Leave us a comment and tell us what you're up to!

About the Authors

Shane Conder Shane Conder and Lauren Darcey--Contributing Editors, Mobile Development--have coauthored two books on Android development: an in-depth programming book entitled Android Wireless Application Development (ISBN-13: 978-0-321-62709-4) and Sams Teach Yourself Android Application Development in 24 Hours (ISBN-13: 978-0-321-67335-0). When not writing, they spend their time developing mobile software at their company and providing consulting services.

        Email        |        Blog        |        Twitter

Lauren Darcey

Sitemap | Contact Us