Responsive Web Design sends the same webpage to all clients, but then adapts itself using CSS and JavaScript, depending on the device. This gave us websites that could change their appearance and functionality based on the features of a person’s device and browser. Web developers could delight customers with tailored experiences, but it only went so far. These days, it’s possible to create even richer experiences on the server side by sending web pages truly designed for the device. It only requires collecting device information up front.
A server-rendered website beats a responsive web page hands down on performance and bandwidth usage by delivering only a fraction of the payload to mobile devices; You can also mix the two approaches, combining responsive web design and server-side optimization by serving large image and video files that are best suited for the device, for example.
ScientiaMobile develops device detection technology that enables websites to deliver rich, adaptive user experiences. ScientiaMobile provides accurate identification of old and new devices thanks to WURFL, its 95,000 device profiles strong catalog, and thanks to its WURFL Infuze API. WURFL covers smartphones, tablets, laptops, smart TVs, and game consoles.
To make it even easier to set up device detection, WURFL InFuze now integrates with HAProxy Enterprise, which means that you can attach device information to HTTP traffic as it passes through your HAProxy load balancer, providing device intelligence to all of your backend applications.
HAProxy Enterprise combines HAProxy, the world’s fastest and most widely used, open-source load balancer, with enterprise-class features, services, and premium support. Its position at the edge of your network makes it the perfect place to inspect traffic. Adding InFuze device detection is easy using your server’s package manager.
Adding the WURFL InFuze Module to HAProxy
First, you’ll need to install the WURFL InFuze C API onto you HAProxy Enterprise server. You can find installation instructions in the WURFL InFuze for C User Guide. You can get the latest WURFL database (a large XML file) from your ScientiaMobile customer vault. Copy the XML file to a folder of your choice on the HAProxy Enterprise server.
You can now use your system’s package manager to add the HAProxy WURFL InFuze module:
$ sudo apt install hapee-1.9r1-lb-wurfl
Edit your HAProxy configuration to add module-load and enable the module. The wurfl-*
directives are used to configure the module itself:
global module-load hapee-lb-wurfl.so wurfl-data-file /path/to/wurfl.xml wurfl-information-list wurfl_id model_name wurfl-cache-size 100000
The wurfl-data-file
line sets the path to the device detection database. The wurfl-information-list
line sets which InFuze properties and capabilities you are going to use (capabilities that you have previously licensed from ScientiaMobile). The wurfl-cache-size
sets the size of the in memory cache. Sizing it appropriately will speed up device look-ups as those User-Agent string matches are accessible from memory.
You can also configure HAProxy to periodically check for the availability of an updated database file. ScientiaMobile provides a personal URL to the updated XML file as part of your relation with the company. HAProxy will load the new data file seamlessly, provided you have installed the WURFL Update package, which you can do with the following command:
$ sudo apt install hapee-1.9r1-lb-wurfl-update
You’ll need to update your configuration’s global section to include another module-load directive and a wurfl-update line:
module-load hapee-lb-wurfl-update.so wurfl-update url \ http://localhost:8000/wurfl.xml.gz delay 24h log
With this configuration, HAProxy will download a new database every 24 hours. Operation success (or failure) is, of course, logged.
The easiest way to forward device data to your back-end applications is to include it as additional HTTP request headers. Use the http-request add-header
directive to append a custom request header. Here’s an example:
listen www_proxy mode http bind :80 server s1 127.0.0.1:8080 http-request set-header X-WURFL-All %[wurfl-get-all()]
The resulting HTTP request header will contain the properties listed by the wurfl-information-list
directive. The header will look like this: X-Wurfl-Properties: firefox_69_0,Firefox
.
Conclusion
ScientiaMobile’s WURFL InFuze lets you create websites that adapt to your users’ browsers and devices. By attaching device information to HTTP requests as they pass through HAProxy Enterprise, the device logic can be moved from the application to the infrastructure.