Page 1 of 1

Mobile Detection using Javascript

PostPosted: Wed Jun 01, 2011 1:15 am
by binkob
First I'd like to thank you for developing Tera Wurfl. Great!

Now to the problem. Even though I did some C programming in the 80's I realize those skills are nearly dead after years of neglect.

The PHP exampes I found on tera-wurfl.com was quite similar to what I wanted to achieve so I managed however quite easily to get the PHP remote client to detect and redirect mobile users using the code below.

Code: Select all
<?php
require_once ('TeraWurflRemoteClient.php');
$wurflObj = new TeraWurflRemoteClient('http://MyTeraWurflMainDomain.com/tera-wurfl/webservice.php');
$capabilities = array("is_wireless_device");
$wurflObj->getCapabilitiesFromAgent(TeraWurflRemoteClient::getUserAgent(),$capabilities);
if($wurflObj->getDeviceCapability("is_wireless_device")){
   header("Location: http://myMobileDomain.mobi/");}
?>


This seems to work just fine after some basic testing so I'm very happy about that.

Now I try to do the same with the Javascript Remote Client but I don't know how to get it working even though I look at the example that comes with tera-wurfl.

Can someone give some hints how how the code would look like?

Another thing I solved but had some initial problem with during the Tera-Wurfl installation was loading the XML file to the database. I had to change so the simpleXML parser was used as the preferred parser, otherwise I got an out of memory error. I use Hostgator and noticed someone else had a similar problem/solution with Hostgator.

Cheers
Peter

Re: Mobile Detection using Javascript

PostPosted: Wed Jun 01, 2011 5:36 am
by binkob
OK, based on the PHP code I got working and the Javascript example.html plus the comments inside this file I tried to get it working but now i've run out of ideas.

Here's what I came up with:

Code: Select all
<html>
<body>

<script src="TeraWurflRemoteClient.js"></script>
<script type="text/javascript">
// The URL to your Tera-WURFL installation's webservice.php
var webserviceURL = 'http://www.MyMainTeraWurflSite.com/terawurfl/webservice.php';

// The user agent you are looking for. In Javascript this is 'navigator.userAgent' for the client
var userAgent = navigator.userAgent;

// The capabilities you are looking for, in an array, example: search = ['product_info','tera_wurfl','playback'];
var search = ['is_wireless_device']; // Is this correct?

// Create new TeraWurfl Object
wurflObj = new TeraWurflRemoteClient(webserviceURL);

// Call Tera-WURFL via the webservice
wurflObj.getCapabilitiesFromAgent(userAgent,search);

<<< NOW WHAT ??? >>>

<<< I guess I have to do something similar to this >>>
if (it_is_a_mobile_device or whatever i should put here)
   document.location.href='MyMobileSite.mobi';

</script>

</body>
</html>


Someone that can fill in the missing parts and correct whatever I've done wrong?

Thanks

Re: Mobile Detection using Javascript

PostPosted: Wed Jun 01, 2011 9:04 am
by kamermans
The Tera-WURFL Javascript example page is a working example, so you can look at its source for inspiration. I'll post an example when I get back to the office.

Re: Mobile Detection using Javascript

PostPosted: Wed Jun 01, 2011 9:38 am
by binkob
Great!

I looked at the working example you referred to and sure got some inspiration but it didn't take me all the way to a working script. Hope you can add and correct the missing and incorrect pieces to the code in my second post to get it working.

Cheers

Re: Mobile Detection using Javascript

PostPosted: Fri Jun 03, 2011 3:06 pm
by kamermans
Here's a complete script that will redirect mobile visitors to an alternate site on page load using Tera-WURFL via JavaScript. If you are using jQuery or a similar JS library, you should use their ready() or onLoad() function instead of replacing the window.onload() function.

Code: Select all
<html>
<body>

<script src="TeraWurflRemoteClient.js"></script>
<script type="text/javascript">
window.onload = function(){
   var webserviceURL = 'http://www.MyMainTeraWurflSite.com/terawurfl/webservice.php';
   var userAgent = navigator.userAgent;
   var search = ['is_wireless_device'];
   wurflObj = new TeraWurflRemoteClient(webserviceURL);
   wurflObj.getCapabilitiesFromAgent(userAgent,search);
   // Use a callback function to handle Tera-WURFL response
   wurflObj.onUpdate = function(capabilities, errors){
      if (capabilities['is_wireless_device'] == 'true') {
         document.location.href='MyMobileSite.mobi';
      }
   }
}
</script>

</body>
</html>