Device Detection for Apps with WURFL.js

Share this article

Key Takeaways

  • WURFL.js (Wireless Universal Resource File) is a set of proprietary APIs and an XML configuration file that provides developers with information about the capabilities and features of various mobile devices accessing their website. This allows for optimized content presentation and improved user experience.
  • WURFL.js can be used to strategically display advertising based on the type of device accessing the website. This is achieved by using the WURFL.is_mobile feature or the form_factor option, allowing for better control over how ads are displayed.
  • While WURFL.js provides insight about the hardware of a device, it can be used in conjunction with Modernizr, which gives information about the capabilities of the web browser. This combination allows for greater control over the way websites work and look on any kind of device.

Responsive web design is not a new topic to mobile developers, many of us are well versed in the process and best practice guidelines. One of these best practices is displaying page elements in different ways based on the browser or device capabilities of the user. To accomplish this designers have traditionally made use of User-Agent strings embedded in HTTP headers. These would generally only tell you if the device used was an iPhone, Android or Desktop computer, no other information.

There are many occasions when a developer needs to know more detail than this to create a fully responsive design. This is where WURFL.js (Wireless Universal Resource File) can help.

What is WURFL.js?

WURFL.js is a growing list of set of proprietary APIs and a XML configuration file which contains information about device capabilities and features for a variety of mobile devices. This provides developers with valuable information about the type of devices their clients are using to access their website. It leverages the same power of Server-side detection that you may be familiar with (using server side languages) without you needing to set any of that up.

The purpose behind WURFL.js is to enable developers to optimize the presentation of content and provide a better user experience, whilst also giving developers insight about users behaviors and usage patterns. It tries to do this in a fast, easy implementable and cost-free way.

How do you use WURFL.js? Let’s get our hands dirty.

Firstly add this line of Javascript to your page:

<script type='text/javascript' src="//wurfl.io/wurfl.js"></script>

Here we have imported a JavaScript file that enables us to access the WURFL object in JavaScript. For example:

{ complete_device_name:"Google Nexus 4", form_factor:"Smartphone", is_mobile:true }

I have set up an example page here, so you can see WURFL.js in action. The source code can be found on github here .

Notice that there are only three properties used:

  • complete_device_name which gives the make and model of the device accessing your website. (However, if the device is a desktop computer it will give you a generic “desktop computer” response).

  • form_factor which can be any one of: desktop, app, tablet, smartphone, feature phone, other mobile etc.

  • is_mobile is a boolean which can be either true or false depending on the device. If it is a mobile or tablet it will return true.

These properties enable you to do things like:

if(!WURFL.is_mobile) {

  $('#wurfl .is-mobile span').html("false");

}

Advertising

WURFL.js can help you strategically display advertising. Some ads look better on mobile devices and others are more appropriate for desktops or laptops. WURFL.js can help you control how ads get displayed and on what kind of devices. You can control the ads by using the WURFL.is_mobile feature, or if you want to have more control, use the form_factor option and target ads depending on the type of device.

WURFL.js and Modernizr

Although what WURFL.js offers is similar to what can be achieved with Modernizr, they’re not the same. Modernizr gives information about the capabilities of the web browser, whereas WURFL.js provides insight about the hardware. There are instances where knowing the device’s make and model is better than knowing only the browser capabilities of the device because whilst the browser may support a certain feature, the device may not. This doesn’t mean that you should get rid of Modernizr altogether. Using WURFL.js and Modernizr together will give you greater control over the way your websites work and look on any kind of device. A good example is the CSS capabilities of Modernizr, which enables you to use different styles depending on the device. This feature is available in WURFL.js too and requires just a single line of Javascript to work:

document.documentElement.className += ' ' + (WURFL.is_mobile ? '' : 'no-') + "mobile";

In this simple example, when a device is mobile the HTML tag will be assigned the is_mobile class, otherwise the class will be equal to no-is_mobile. By including this you can create different style sheets depending on the class assigned.

Conclusion

I know how tricky it is to get information about different devices accessing your application and have used Device Description Repositories before that required server-side libraries. To me WURFL.js is a great and simple resource, especially for no cost.

It can give developers control over how their content gets presented on a multitude of devices, better targeting of advertising and better analytics over the way users access their websites. Have you had any experience with WURFL?

Frequently Asked Questions (FAQs) about WURFL.js

What is WURFL.js and how does it work?

WURFL.js is a JavaScript-based tool developed by ScientiaMobile. It is designed to detect and identify a wide range of devices, including smartphones, tablets, smart TVs, and game consoles. The tool works by analyzing the User-Agent string of the HTTP request header sent by the browser. It then matches this information against its extensive database of device profiles to determine the device’s capabilities and characteristics. This information can be used to optimize the user experience by tailoring content and layout to the specific device.

How can I implement WURFL.js in my web application?

Implementing WURFL.js in your web application involves adding a JavaScript snippet to your HTML pages. This script communicates with the WURFL cloud service to retrieve device information. You can then use this information to adapt your content and layout to the specific device. Detailed instructions and code examples can be found in the WURFL.js documentation.

Is WURFL.js free to use?

WURFL.js offers both free and paid versions. The free version provides basic device detection capabilities, while the paid versions offer more advanced features and support options. Pricing details can be found on the ScientiaMobile website.

How accurate is WURFL.js device detection?

WURFL.js is known for its high accuracy in device detection. It uses an extensive and regularly updated database of device profiles, which allows it to accurately identify a wide range of devices. However, like any device detection tool, it may not be 100% accurate due to the vast number of devices and the constant release of new models.

Can WURFL.js detect device capabilities?

Yes, WURFL.js can detect a wide range of device capabilities, including screen size, device type, browser type, and operating system. This information can be used to optimize the user experience by tailoring content and layout to the specific device.

Does WURFL.js support server-side device detection?

WURFL.js primarily operates on the client-side, using JavaScript to analyze the User-Agent string. However, ScientiaMobile also offers server-side solutions for device detection, such as the WURFL API and WURFL InFuze.

How does WURFL.js compare to other device detection tools?

WURFL.js is considered one of the leading device detection tools due to its high accuracy, extensive device database, and advanced features. However, the best tool for your needs may depend on your specific requirements, such as the level of detail you need, your budget, and whether you prefer a client-side or server-side solution.

Can WURFL.js detect new devices and browsers?

Yes, WURFL.js is regularly updated to include new devices and browsers. This ensures that it remains accurate and up-to-date in the rapidly evolving mobile landscape.

What kind of support is available for WURFL.js?

ScientiaMobile offers a range of support options for WURFL.js, including documentation, community forums, and direct support for paid users. This ensures that you can get the help you need to effectively implement and use the tool.

How can I get started with WURFL.js?

You can get started with WURFL.js by signing up for a free or paid account on the ScientiaMobile website. Once you have an account, you can download the JavaScript snippet and add it to your HTML pages. Detailed instructions and code examples are provided in the WURFL.js documentation.

Donald DragotiDonald Dragoti
View Author

Donald is a Computer Engineering student who is passionate about mobile and web technology. While his focus is in computer networks, he is proficient in C, Java and constantly learning about web development and security.

chriswmodernizr
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week