Developing Android WebApps Using HTML 5 TechnologiesYour first WebApp

Developing and testing your first Web app is no different from a Web page. You can use a text editor (like vi or Notepad) to enter the following HTML code, and save it as “myfirstwebapp.html”. Copy the HTML file to your Android mobile, and open it in the browser. You could also test your WebApp on a wireless LAN network by saving the HTML file on an HTTP server (such as XAMPP) and entering the IP address (or hostname) as the URL in the browser:

<!doctype  html>
<html>
<head>
<style  type="text/css">
p.sh
{
border-style:  solid;
border-width:  medium;
-webkit-border-radius:  15px;
background-color:  yellow;
}
</style>
</head>
<body>
Overview
<p >Hello  World!</p>
</body>
</html>

Figure 4 is a screenshot of a WebApp that helps users with task management. It uses localStorage on the mobile device to store tasks, priorities and due dates. This application’s development was covered in LFY’s April 2012 issue; the app has been modified for mobiles. The link to the source code is given in the References section. The key differentiator, when compared to the desktop WebApp, is the inclusion of metadata to the HTML file, ensuring that the text on the page fits a smaller screen.

<meta  name="viewport"  content="width=device-width">

Using mobile features

Developing Android WebApps Using HTML 5 TechnologiesStarting with Android 1.5, the default browser allows access to GPS (geolocation) and localStorage databases. Additionally, bridges are made available to access connectivity, hardware sensors and the camera. This brings WebApp capability closer to that of native apps. Geolocation: The user’s location can be fetched using the W3C API navigator.geolocation.getCurrentPosition(). This is made possible with the addition of the new attribute ‘geolocation’ to the navigator object. Developers should check support for this functionality for the existence of the object navigator.geolocation. Click-to-call: This feature is supported from within the Android mobile browser by adding the tel attribute to an anchor tag, such as: Call <a href=”t el:9123456789″>9123456789</a>. When the user touches/clicks the telephone number, the Phone application accepts the number and prompts the user to make a call. User input: There are different input types that can be added to suit mobile users. The form of the keyboard can change to suit the convenience of the user. For example:

  • Contact number: <input type=tel><br> (The input type ‘tel’ displays the bigger number keypad, hiding alphabets and special characters.)
  • Email address: <input type=email><br> (The input type ‘email’ displays a keyboard with alphanumeric keys, @ and .com)

Frameworks for developing apps for mobiles

While native app developers get extensive tools and IDEs to develop on Android, mobile WebApp developers get the backing of standards-based frameworks that let developers achieve more with less code. Some of the popular and emerging frameworks are jQuery mobile, Twitter bootstrap, Modernizr and Titanium Mobile. It is highly recommended that WebApp developers be aware of the capabilities of each framework, before gearing up for any projects. These frameworks have many advantages like rapid development and require minimal testing.

Recommendations for mobile WebApp design

Developers should pay attention to how Web technologies are used and their growing number of features, keeping the following points in mind:

  • Ensure a quick start-up time by using offline Web technologies. By using localStorage, the WebApp’s performance can be close to a native app’s.
  • Use an automatic sign-in to avoid a user input on every launch.
  • Use compressed data transfer over the network to save users’ time and money.

For a complete list of such recommendations, please refer to the W3C recommendations listed in the References section.

Converting HTML5 WebApps to native apps

There are reasons why you may want to convert your HTML5-based WebApp to a native app. This conversion is made easy through the service provided by phonegap.com. Create an account on build.phonegap.com. Upload your HTML5, CSS and JavaScript files. Generate the Android native app using the service. With the rapid rise in the use of Android-based smartphones, the increased availability of low-cost mobile Internet data, and the growing power of Web based technologies, WebApps are the right choice to develop most applications.

Popularity: 6% [?]

Incoming search terms for the article:




Related posts

coded by nessus