Click here to Skip to main content
15,867,325 members
Articles / Operating Systems / Windows

How Mobile Web Applications Work

Rate me:
Please Sign up or sign in to vote.
4.04/5 (21 votes)
27 Sep 2005CPOL5 min read 123.9K   50   17
An article on how .NET mobile web applications work

Introduction

In the mobile world, we are coming across different varieties of mobile devices. Some mobiles are capable of rendering rich graphics, a few are able to render even low quality graphics and others are capable of displaying text only. Developing application targeting these devices had been a nightmare (prior to .NET mobile development facilities), developers were writing additional code to render the same application for different devices and it was not so easy to do. Now .NET mobile development facilities make the work easier and relax developers from understanding the target mobile device capability and give guarantee to run the same application under different mobile platforms without writing any additional code. But again the question is "How is it possible?" Well the short answer is everything is possible in .NET and the long answer is you need to understand the rendering process and the flow of communication between the web application and the mobile devices.

This article gives you a clear idea of how the same web application (.NET based) renders differently based on device capability. For example, consider a mobile web page (let's call it a “birthday tracker”) that contains a calendar control to track birthdays. If your mobile device is capable of displaying high-end graphics, then you will see the calendar control in your mobile screen or if not the same control will be displayed according to the device's capability (may be in a text format). The interesting point is developers are freed from the task of writing additional code to make the application compatible across various target devices. Checking the type of the target mobile device, its capability and making the application compatible for the mobile device is the responsibility of .NET; developers need to focus only on the functionality. Let's explore how .NET detects the device, converts the data and renders based on the device capability.

The main advantage of .NET mobile application controls (placed on web page) are that they render themselves automatically based on the mobile device capability. This process involves two major components:

  • ASP.NET Mobile Control: These controls are very much familiar to normal controls like button, textbox, etc. and are specially designed to work with mobile devices.
  • Device Adapter: The prime job of the adapter is to generate output from the controls and map to a markup language which the device can understand such as HTML, cHTML, WML and XHTML.

These two components work together to render the same application’s data across multiple devices. At present, .NET supports 200+ mobile devices. The configuration of these devices are define in the machine.config file.

Now examine a case study of how it works when you are requesting a web page from a Pocket PC (PDA). Pocket PC will communicate with a web server through an HTTP request. This request will be processed in three stages. The first stage involves identifying the type of the device, in this case a Pocket PC, and its capability like image and browser capability and the types of markup languages supported. The information about device capability is configured in the Machine.config file and the web application refers machine.config to identify the device capability and other information about the device. If we look at the HTTP request coming from a mobile device, it contains three major sections: the URL, User Agent and Header information, as illustrated below:

Image 1

[Figure 1: Process involved in browsing a web page from a Pocket PC]

The User Agent string contains the device info and this string will be used to machine.config to identify the details about the requesting mobile device. The URL section contains the requested page. Once the page identifies the application, the server looks for the instance of the requested page. If the requested page is not yet instantiated, then the requested web page (.aspx) will first be parsed, then compiled by the compiler, and then the compiled page is stored in the assembly cache and finally the server will create a new instance of the cached page. The parsing and compiling process is a one time activity, all subsequent requests for the same page will be instantiated from the cache irrespective of the mobile device requesting it. This process leverages the performance of accessing a mobile web page.

The second stage involves the page rendering process. Once the page has instantiated the controls (mobile controls), the execution process starts based on the user’s inputs. After the execution, the data has to be rendered based on the device capability. This is taken care of by the device adapters associated with the device and controls. The device adapters generate a markup language compatible with the device for the output, in this scenario, HTML output, and send it to the device (Pocket PC).

Now let's examine another case study of how it works when you request a page from a cell phone. In this scenario, the cell phone mobile browser sends the WAP request to a WAP gateway. This gateway is provided by the cell phone service providers as illustrated below:

Image 2

[Figure 2: Process involved in browsing a web page from a cell phone]

Now the WAP gateway translates this into an HTTP request and passes it to the web server over the internet. The HTTP request contains the URL, the User Agent and Header Information. The process of execution of the page is the same as we discussed earlier in our case study for Pocket PC. The main point is, instead of generating an HTML output now, it generates a WML output because cell phone mobile browsers can understand only WML. Once the WML output has been generated, the web server sends the output as HTTP response to the WAP gateway and the WAP gateway translates it to a WAP response and passes it to the cell phone.

This is how mobile web applications work across different mobile devices. The .NET mobile development facilities make our work very flexible and leverage productivity. Microsoft is doing lots of enhancements to its mobile development facilities because a lot of today’s businesses run on mobile devices. I am going to update you all more about mobile development in my coming articles.

History

  • 27th September, 2005: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Web Developer
United States United States
I am Anand Kumar from India my core expertise is developing robust service components using ATL COM ,Remoting and Web Service. I am passionate about performance optimization and best practices of .NET ,Microsoft Patterns and Practices & VSTS . I believe knowledge sharing is the greatest joy ,the philosophy behind knowledge sharing is gain more by sharing more , apart from my regular office work I do involve in various Microsoft User Group forums such as UG-Hyderabad ,Bangalore, Chennai etc. I am one of the core members of Microsoft User Group Hyderabad (MUGH ) and a volunteer member of INETA.


Comments and Discussions

 
GeneralMy vote of 3 Pin
Mukesh_B19-Mar-12 20:28
Mukesh_B19-Mar-12 20:28 
GeneralMy vote of 3 Pin
Sadomba Joel1-Mar-12 2:34
Sadomba Joel1-Mar-12 2:34 
Generalvery good artical Pin
keyur soni15-Jun-11 22:35
keyur soni15-Jun-11 22:35 
Generalsource code or example Pin
Fahman Alkhwlani17-May-10 7:57
Fahman Alkhwlani17-May-10 7:57 
QuestionSimilar Pin
fabriciob26-Nov-07 4:48
fabriciob26-Nov-07 4:48 
GeneralMobile Web Application Pin
Bala Munugoti25-Dec-06 0:38
Bala Munugoti25-Dec-06 0:38 
GeneralMessage Closed Pin
15-Oct-07 18:00
imtiyaz momin15-Oct-07 18:00 
QuestionsupportsFileUpload Pin
Alexandru Stanciu19-Jul-06 23:18
Alexandru Stanciu19-Jul-06 23:18 
AnswerRe: supportsFileUpload Pin
HandyGuy26-Jul-06 4:23
HandyGuy26-Jul-06 4:23 
GeneralGood article Pin
Aliasgar_SR5-Oct-05 18:46
Aliasgar_SR5-Oct-05 18:46 
GeneralRe: Good article Pin
HandyGuy5-Oct-05 19:47
HandyGuy5-Oct-05 19:47 
Thanx , I am Mentioning few good links talking about performance optimization based on FX 1.x

http://blogs.msdn.com/ricom/

http://msdn.microsoft.com/webservices/default.aspx?pull=/library/en-us/dnwebsrv/html/asmxremotesperf.asp

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnpag/html/scalenet.asp

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dndotnet/html/dotnetgcbasics.asp

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dndotnet/html/highperfmanagedapps.asp

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dndotnet/html/fastmanagedcode.asp

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dndotnet/html/dotnetperftechs.asp

Please feel free to ping me if you need any further help

Thanx
Anand
http://spaces.msn.com/members/anandkumar
GeneralRe: Good article Pin
HandyGuy1-Aug-06 1:21
HandyGuy1-Aug-06 1:21 
GeneralNice one Pin
huo1128-Sep-05 4:59
susshuo1128-Sep-05 4:59 
GeneralRe: Nice one Pin
HandyGuy28-Sep-05 19:11
HandyGuy28-Sep-05 19:11 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.