How To: Detect Mobile Device Users In Your Web Site – JavaScript

shair — Fri, 09 Dec 2011 17:05:00 GMT

Today everything is about Mobile Devices, users are using their tablets and phones to view web sites. Some web sites has a mobile application or just what to inform the user about a related mobile application.

So the question is how to inform the user about a mobile application related to a specific site?

You can put some links in your site and maybe the user will click on those links and will be redirect to your mobile application, but I want more – I want my site to detect if the user comes from a mobile device and if so I want to tell him I got some mobile application for him.

In order to do it I’ve wrote some JavaScript code to detect from what device the user is coming from, based on his device I’ll send him a message to inform him I got an mobile application for him and if the user decide to view it he just need to click OK and I’ll redirect him to the application market.

Code Flow:

Download JavaScript Code

The code is very simple, all you need to do I use navigator.userAgent to see from what browser the user is coming from and send a confirmation message, if the user click OK then change window location to your mobile application.

I’ve also set a cookie to check if the user already so this message in the past 30 days, I don’t want to annoy my user each time he enters my site.

<script>
function detectMobileDevice() {
    var message = "This web site has an app for ";
    var learn = "Click OK to learn more";
    var iPadAppId = "";
    var wp7AppId = "c52573e0-08c5-4e33-abfa-992021f0630f";
    var androidAppId = "";
    var iPhoneAppId = "";
    var webOsId = "";
 
    if (document.cookie.indexOf("mobile_app_notification=false") < 0) {
 
    //This is not a mobile browser....
    if (navigator.userAgent.match(/Opera/i) 
            || navigator.userAgent.match(/Dolphin/i)) return;
 
    if ((navigator.userAgent.match(/Windows Phone/i)) 
            || (navigator.userAgent.match(/ZuneWP7/i))) {
       setCookie();
       if (wp7AppId != "" && confirm(message + "Windows Phone! " + learn))
           window.location = "zune://navigate/?phoneAppID=" + wp7AppId;
     } else if (navigator.userAgent.match(/android/i)) {
       setCookie();
       if (androidAppId != "" && confirm(message + "Android phone! " 
                                                            + learn))
           window.location = "market://details?id=" + androidAppId;
     } else if (navigator.userAgent.match(/iPad/i)) {
       setCookie();
       if (iPadAppId != "" && confirm(message + "iPad! " + learn))
            window.location = "http://itunes.apple.com/WebObjects/
                            MZStore.woa/wa/viewSoftware?id=" + iPadAppId;
     } else if ((navigator.userAgent.match(/iPhone/i)) || 
                (navigator.userAgent.match(/iPod/i))) {
       setCookie();
       if (iPhoneAppId != "" && confirm(message + 
                                     "iPhone and iPod Touch!" + learn))
            window.location = "http://itunes.apple.com/WebObjects/
                          MZStore.woa/wa/viewSoftware?id=" + iPhoneAppId;
     } else if (navigator.userAgent.match(/webOS/i)) {
       setCookie();
       if (webOsId != "" && confirm(message + "webOS phone! " + learn))
            window.location = "http://developer.palm.com/appredirect/?
                                          packageid=" + webOsId;
     }
  }
}
 
//Define a cookie so we don't want to annoy the user.
function setCookie() {
    var date = new Date();
    //30 = Number of Days for the cookie to expire.
    date.setTime(date.getTime() + (30 * 24 * 60 * 60 * 1000));
    var expires = "; expires=" + date.toGMTString();
    document.cookie = "mobile_app_notification=false" + expires;
}
 
detectMobileDevice();



</script>

Enjoy

Shai Raiten's Blog : TECH, JavaScript, Windows Phone 7

How To: Detect Mobile Device Users In Your Web Site – JavaScript

Code Flow: