Category: Mobile

Hybrid Apps – Android System WebView Updates

From Android Lollipop 5.0, Google started pushing an app called “Android System Web View”, which they periodically update the device web view. Since Apache Cordova / Adobe PhoneGap is well adopted for building cross platform Mobile apps, this will have significant impact on the apps we’ve already built!

If you’re a Hybrid app developer and supporting Android 5.0 Lollipop & above versions, it’s worth to keep an eye on these updates and test your apps often.

It’s highly recommended to subscribe Chrome Canary beta channel – Android System WebView beta to get the updates early and act accordingly.

You can join Google+ WebView beta community to get latest updates. Android System WebView is supported on Android Lollipop 5.0 & above versions.

How to uninstall the Web View update

  • Tap on the Settings icon.

  • Scroll down and tap on Apps or Application Manager.

  • Look for Android System WebView under Downloaded page.

  • Tap to open the info page.

  • Now click on UNINSTALL UPDATES button. This will reset the web view.

NOTE: It’s a temporary solution till you work out a fix for it. If any of your existing app is breaking in the production, you can quickly ask them to uninstall the Android System WebView update.

Hope it helps!

How to setup Android emulator to test mobile web apps

The real deal with Mobile web application development is testing it on multiple devices. So every one may not be able to buy all the mobile devices to test, especially with Android. Since we have many devices from multiple OEM’s and with different screen size, it’s not a feasible option to buy all devices and test. Thanks to Google for providing emulators to make our job easy!

I have already wrote an article on testing mobile web applications in Android Emulator, but it’s initial version of Android device and it’s depreciated now. So, i thought writing extension to that with latest tools available from Google. 

In this article, i will show you how to setup Android Emulator to test your mobile web applications on Windows OS [Since, more people looking for a solution on this platform Winking smile].

  • Download the Android SDK from this URL – Android SDK.

image

NOTE: There may be change of page layout in future, but i hope Google allow to download the Android SDK.

  • It gives you option to download x86 or x64 version. It’s up to you to choose the right version for you. NO CONSTRAINTS. The SDK contains all the required tools to get started with developing Android apps, anyway it’s out of topic.
  • Once you are done downloading, unzip it. You will see two folders and  SDK Manager.exe.

image

  • Click on the SDK Manager to launch. It launches the Android SDK Manager window.

image

  • Now click on Tools –> Manage AVDs…

image

  • It launches Android Virtual Device Manager window.

image

  • Now, we need to create a new Android Virtual Device, by clicking on New… button.
  • When you click on New… button, it launches Create New Android Virtual Device (AVD) window.

image

  • Enter AVD Name, select Device  and Target. In the Device dropdown, you will get all the devices with different screen sizes including Android Tablets.
  • Target has the recent Android Version list, which you can select the required one. Now, we have Android 4.2 Jelly Bean.

image

  • You can leave the rest of the fields to their defaults, which we are not going to mess up. If you wish to play around with other fields too, you are free to do that. Again NO CONSTRAINTS.
  • On clicking on OK button, it shows message box, which summarizes the configuration of out emulator.

image

  • Click OK button. Now the newly configured Android emulator is added to the list.

image

  • Now select the newly created emulator and click on Start… button.

image

  • It will invoke Launch Options dialog.

image

  • Click on Launch button, by leaving the options to their defaults! It will launch the emulator Smile

image

  • Now we are ready to test our mobile web application.
  • Launch the web browser in the emulator and test your applications!

image

NOTE: If you are testing your mobile web apps, that are deployed to local IIS, then you have to use IP Address instead of using localhost.

Happy mobile web application programming and testing!

Thanks!

Mobile Web Applications with ASP.NET WebForms

I have seen many people asking questions in forums about Mobile web application development using ASP.NET WebForms. So i planned to write a blog post on the same.

ASP.NET is a powerful web application development platform, allows to leverage most of the features in Mobile web application development. Now a days, mobile devices are capable of rendering HTML 5 content. Websites which works in desktop browser is rendering great in mobile browsers too. Mobile web browsing is rapidly increased and every one looking for ON THE GO solution!

Now, the question is, Can we convert the existing web application to Mobile web application?

Answer is YES. You can can do that. Just by adding the Viewport meta tag to the Head section of the webpage and you are done!

Viewport Meta tag
  1. <meta name="viewport" content="width=device-width" />

 

To know more about the Viewport meta tag, check this link – Viewport. This viewport meta tag works absolutely fine in all major mobile device browsers including –

  • Apple iPhone – Mobile Safari
  • Android(GingerBread, ICS, Jelly Bean) – Native browser, Google Chrome, Opera
  • WindowsPhone – IE9 and IE 10
  • BlackBerry – Native Browser

Sample Code

Code Snippet
  1. <%@ Page    Language="C#"
  2.             AutoEventWireup="true"
  3.             CodeBehind="Index.aspx.cs"
  4.             Inherits="MobileApp_WebForms.Index" %>
  5.  
  6. <!DOCTYPE html>
  7.  
  8. <html>
  9. <head runat="server">
  10.     <title>Mobile WebForms</title>
  11.     <meta charset="urf-8" />
  12.     <meta name="viewport" content="width=device-width" />
  13.     <style type="text/css">
  14.         body
  15.         {
  16.             font-family:Verdana;
  17.         }
  18.         label
  19.         {
  20.             width:100px;
  21.             float:left;
  22.             display:block;
  23.         }
  24.         input[type=text]
  25.         {
  26.             width:200px;
  27.         }
  28.         .content
  29.         {
  30.             width:350px;
  31.             margin:0px auto;
  32.         }
  33.         header
  34.         {
  35.             width:350px;
  36.             text-align:center;
  37.             font-size:15px;
  38.             font-weight:bold;
  39.         }
  40.         .button
  41.         {
  42.             width:350px;
  43.             text-align:center;
  44.         }
  45.     </style>   
  46. </head>
  47. <body>
  48.     <form id="form1" runat="server">
  49.     <div class="content">
  50.         <header>
  51.             Contact Us
  52.         </header>
  53.         <div>
  54.             <label>Name</label>
  55.             <asp:TextBox runat="server" ID="txtbox" />
  56.         </div>
  57.         <div>
  58.             <label>Email</label>
  59.             <asp:TextBox runat="server" ID="txtEmail" />
  60.         </div>
  61.         <div>
  62.             <label>Phone</label>
  63.             <asp:TextBox runat="server" ID="txtPhone" />
  64.         </div>
  65.         <div class="button">
  66.             <asp:Button Text="Send" runat="server"  />
  67.         </div>
  68.     </div>
  69.     </form>
  70. </body>
  71. </html>

Try the above code in a mobile browser and you will find the difference!

Next question is, How do we create a separate version of Mobile web application?

We can create stunning mobile specific web application using ASP.NET WebForms and when you access the web application from desktop browser it renders the general desktop web app and when you access it from Mobile browser it renders the mobile web app.

How we need to redirect the user to the respective web app, when user access from different devices? 

I explained the same in one of my earlier blog post – Detect the device and redirect in ASP.NET. That’s one way of doing it. We have few more ways to do the same.

  • JavaScript – By sniffing the UserAgent string and redirect to the appropriate web app – DetectMobileBrowsers
  • CSS 3 Media Queries – Take advantage of CSS 3 media queries and you can redirect the users based on the requested device – MediaQueries. I feel it’s more elegant way.

It’s up to you to choose the right method, based on the devices you are going to support! 

I also suggest you to check the following JavaScript Framework, which has great API support for mobile web application development.

There are many mobile frameworks available, but the above mentioned are good and have great API’s to quickly design a mobile web application.

Now comes the final part, Testing. Testing the mobile web application is real challenge. Everyone can’t afford to buy physical devices and test the web applications. Few device manufacturers provide Emulators, so that we use to test your web application.

Check the below links, which i have blogged earlier related to testing the web application on Emulators!

Apple iPhone/ iPod/ iPad 

Windows Phone

Android, Android Emulator

BlackBerry – Ripple Emulator

So, not least, ASP.NET Mobile website – Mobile. Great repository of information related to developing mobile web applications in ASP.NET and links to some cool tutorials.

If you have any queries or doubts in developing Mobile web applications, do post your questions in Mobile and Handheld Devices Section in ASP.NET Forums. All time experts, great answers!

Happy mobile web programming!!!

Thanks!

Detect requesting device type and redirect in ASP.NET

Smart Phones are rapidly increasing, so web app developers are more concentrating on porting their web applications compatible to view on smart phones.

With ASP.NET, making an existing web application compatible for smart phones is pretty easy. You can just add the following META tags in the &lt;head&gt; section and you are done. ASP.NET takes care of the rest!

META Tags
  1. <meta name="HandheldFriendly" content="true" />
  2. <meta name="viewport" content="width=device-width" />

 

ASP.NET MVC 4 has got pretty more options for making the website Mobile compatible!

http://www.asp.net/mvc/tutorials/mvc-4/aspnet-mvc-4-mobile-features

In ASP.NET WebForms too, we have an option to check whether the requested device is Mobile or not – Request.IsMobileDevice, which is not appropriate in most of the scenarios! I mean, it’s failing to detect the device type correctly!

Now, we discuss about custom solution for ASP.NET WebForms – detect the device type and redirecting!

Suppose if you have two versions of your web application – Mobile & Desktop, and you may wish to redirect the user to the appropriate web app based on the requested device.

To do that, try the following code snippet!

Detect Device in ASP.NET
  1. //Redirect the user based on the requested device
  2.             bool bIsMobileDevice = false;
  3.            
  4.             string[] MobileDevices = new string[] { "iPhone", "iPad","iPod","BlackBerry",
  5.                                                      "Nokia", "Android", "WindowsPhone",
  6.                                                      "Mobile"
  7.                                                      };
  8.             foreach (string MobileDeviceName in MobileDevices)
  9.             {
  10.                 if ((Request.UserAgent.IndexOf(MobileDeviceName, StringComparison.OrdinalIgnoreCase)) > 0)
  11.                 {
  12.                     bIsMobileDevice = true;
  13.                     break;
  14.  
  15.                 }
  16.             }//end:foreach loop
  17.  
  18.             if (bIsMobileDevice)
  19.             {
  20.                 Response.Redirect("Mobile/Home.aspx");
  21.             }
  22.             else
  23.             {
  24.                 Response.Redirect("Desktop/Home.aspx");
  25.             }

Let’s examine, what the above code does – A String array holds the mobile device names, which is matched with the User Agent string. If match is successful, then the user is redirected to the Mobile website!

Cool! If you examine the above code, it  contains the device names hardcoded in string array! Suppose, in future if you wish to add another device. For that, you may have add the new device name to the string array, recompile it and upload it back to the web server!

Seems to be an inefficient solution. The above solution will be suitable for scenarios like if you are targeting particular device type like iPad etc.,

Now we will see a more generic way to achieve the solution to the problem! We create an XML file, which holds the Mobile device names –

MobileDevices.xml
  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <Devices>
  3.   <Device>iPad</Device>
  4.   <Device>iPhone</Device>
  5.   <Device>iPod</Device>
  6.   <Device>WindowsPhone</Device>
  7.   <Device>Android</Device>
  8.   <Device>BlackBerry</Device>
  9.   <Device>Nokia</Device>
  10.   <Device>Samsung</Device>
  11.   <Device>Mobile</Device>
  12. </Devices>

 

The above file can be created under App_Data folder! Now you can read the device names from this file using classes in System.Xml.Linq namespace.

To do that, check the below code snippet,

Code Snippet
  1. bool bIsMobileDevice = false;
  2.  
  3.             XDocument mobileDeviceDoc = XDocument.Load(Server.MapPath("App_Data/MobileDevices.xml"));
  4.  
  5.             var mobileDevices = from devices in mobileDeviceDoc.Root.Elements()
  6.                                 select devices;
  7.  
  8.             foreach (XElement device in mobileDevices)
  9.             {
  10.                 if (!string.IsNullOrEmpty(device.Value))
  11.                 {
  12.                     if ((Request.UserAgent.IndexOf(device.Value, StringComparison.OrdinalIgnoreCase)) > 0)
  13.                     {
  14.                         bIsMobileDevice = true;
  15.                         break;
  16.  
  17.                     }
  18.                 }
  19.  
  20.             }//end:foreach loop
  21.  
  22.             if (bIsMobileDevice)
  23.             {
  24.                 Response.Redirect("Mobile/Home.aspx");
  25.             }
  26.             else
  27.             {
  28.                 Response.Redirect("Desktop/Home.aspx");
  29.             }

Now this solution was more feasible! When you want to add new device, just add an element in the MobieDevices.xml and you are done. No need to re compile you code and upload it back to the web server. It just works!!!

Happy Mobile Web Programming!!!