WebApps are easy to develop and with them, it is actually possible to ‘write once, and deploy everywhere’. Anyone who has used GMail or the likes knows what a WebApp is.
It is a browser-based application served over the Internet (or any other network). One difference between a Web page and a WebApp is that the latter typically has more interactive options like buttons, icons, and alerts, like a regular application. While the initial versions of WebApps needed an always-on Internet connection, the latest WebApps can be used just like native apps, with limited or no Internet connection. Some examples of the best WebApp alternatives to native apps are from Google, Facebook, Twitter, Citibank, Financial Times, and paytm.com.
A blessing to WebApp developers is ‘WebKit’, the layout engine common to Android and Apple Safari browsers. This makes a WebApp available to a wide range of mobile devices in the market.
The WebApps Trend
Web 2.0 technologies made the power of native desktop applications available to browser-based WebApps. Google Docs, for example, gives users almost the same functionality as desktop-based office suites. It is a no-brainer to predict the same trend on mobile devices. In fact, according to experts, what took three decades to mature on PCs will happen in the next five years on mobile devices.
The convergence of three important trends is key to the evolution of WebApps on mobiles. While better-performing smartphones favour both native apps and WebApps equally, the declining tariffs of mobile data services and the standardisation of improved Open Web technologies favour WebApps.
WebApps or Native Apps?
So should you develop your application as a WebApp or a native app? The answer could be based on the available skill sets, but here are some pros and cons of both that you could consider to help you take a better decision. WebApps are developed using HTML, JavaScript, and CSS3. Native apps are typically developed using Java on Android.
Aspects in Which WebApps Score Better Than Native Apps
App Distribution: A native app needs to be made available through Google Play (formerly Android Market), which is controlled by Google. Other sources require end users to have complete trust in the app gateway and the app you are providing. A WebApp, in contrast, just needs to be hosted on a Web server, and the URL is provided to the user.
New Releases and Patches: New versions of WebApps can be made available with no extra effort from the end user. A native app requires users to ‘update’ it (download and install) from Google Play. The end user has to put in much less effort for WebApps.
Supporting Multiple Platforms: Android comes with a built-in standards-based Web browser. Developing WebApps for this platform will also make the app available on any other mobile platform that has a standards-compliant Web browser, like Safari or Firefox. This aspect could be a major differentiator for WebApps if end users want the service/application to be available on multiple devices that run various different OSs, where native apps must exist and be installed for each, while a single URL to the WebApp works for all.
Speed and Ease of Development: A WebApp takes considerably less time and effort to develop compared to a native app. It is easy to get developers with skills in Web technologies.
Aspects Where Native Apps Score Better
Offline Usage: While the HTML5 standard does provide WebApps the capability to store data offline, native apps are ideal for both offline and online purposes. With WebApps, offline storage of data is temporary when the app does not have Internet connectivity. Native apps don’t have this limitation.
Ease of Use: A native app may score higher on this count as it runs as an independent application and it’s easy to switch between multiple applications on an Android device. An application with an icon for the App is more user-friendly when it is being launched.
User Satisfaction Ratings and Reviews: Users like to review apps and compare them before installation. This is more convenient when it is a native app.
Monetising: Native apps score better at monetising due to the transaction infrastructure already provided by Google.
Responsiveness: The main difference between WebApps and native apps is that native apps have the UI already on the client and have the luxury of choosing rich graphics that are stored locally. WebApp developers need to be conscious of the download time and data transfer limits.
Hardware Performance: While WebApps make it easier to use the hardware sensors available on Android mobiles, their effectiveness and performance are better with native apps.
WebApp Support in Android
Android supports native apps and WebApps in the browser. It is also possible to develop hybrid apps — native apps with a WebApp embedded, using the WebView feature on Android, supported from O.S. Version 1.0.
Why Use Web Technologies?
The World Wide Web has come a long way. Though there is standardisation of Web technologies such as HTML, different browser vendors are divided with respect to support. Some vendors have introduced proprietary features in browsers, leaving many websites incompatible or inconveniencing programmers because of the need for additional coding and testing. The most common banner on websites, for a while, was, “Works only in IE”. This was the situation with desktop-based browsers.
The Android browser uses WebKit as its rendering engine, which is close to W3C (World Wide Web Consortium) standards and is making Open Web adoption a reality. An appeal from the W3C regarding the HTML5 series of technologies is to eliminate incompatibilities between browsers. With WebKit-based browsers compatible across Android and iOS-based devices, the majority of the mobile Web is closer to standards than earlier, benefiting both developers and users.
The HTML5 series of technologies is a big leap forward in standardisation, and the W3C acknowledges that the current shipping versions of all major browsers have good support for key HTML5 features. Mobile gaming, major news websites, and financial services have started adopting the latest features for a better user experience. HTML5, in combination with JavaScript and CSS3, brings the mobile Web experience close to native apps.
Your 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>
<p class=”sh”>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
Starting 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=”tel: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 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.
References
[1] Web App Developer Overview from Android: http://developer.android.com/guide/webapps/index.html
[2] W3C Recommendation Document: Mobile Web Applications Best Practices: http://www.w3.org/TR/mwabp/
[3] Call for action: the Open Web needs you *now*
http://www.glazman.org/weblog/dotclear/index.php?post/2012/02/09/CALL-FOR-ACTION:-THE-OPEN-WEB-NEEDS-YOU-NOW
[4] Android WebView example: http://www.mkyong.com/android/android-webview-example/
[5] Todo using localStorage source code: https://www.opensourceforu.com/article_source_code/apr12/local_storage.zip
Awesome Article. Good Job.