This example demonstrates device detection using user-agent client hints in a real-world scenario. When a clint-hints-enabled user first visits a website, the server will recieve the sec-ch-ua and sec-ch-ua-mobile headers. Along with the user-agent. This information is then used to determine if the client supports user-agent client hints and request them if needed by setting the Accept-CH header in the response. Clicking the button below will cause a new request to be sent to the server, along with any additional headers that have been requested.
This example requires a local data file. The free 'Lite' data file can be acquired by
pulling the git submodules under this repository (run `git submodule update --recursive`)
or from the device-detection-data
GitHub repository.
The Lite data file is only used for illustration, and has limited accuracy and capabilities.
Find out about the more capable data files that are available on our
pricing page
const require51 = (requestedPackage) => {
try {
return require('/../../../' + requestedPackage);
} catch (e) {
return require(requestedPackage);
}
};
const core = require51('fiftyone.pipeline.core');
require((process.env.directory || __dirname) +
'/../../../deviceDetectionOnPremisePipelineBuilder');
const fs = require('fs');
const datafile = (process.env.directory || __dirname) + '/../../../device-detection-cxx/device-detection-data/51Degrees-LiteV4.1.hash';
if (!fs.existsSync(datafile)) {
console.error("The datafile required by this example is not present. Please ensure that the 'device-detection-data' submodule has been fetched.");
throw ("No data file at '" + datafile + "'");
}
const getValueHelper = (flowData, propertyKey) => {
var device = flowData.device;
try {
const property = device[propertyKey];
if (property.hasValue && property) {
return property.value;
} else {
return property.noValueMessage;
}
} catch (error) {
return 'Not found in datafile';
}
};
var pipeline;
const setPipeline = (properties) => {
performanceProfile: 'MaxPerformance',
dataFile: datafile,
autoUpdate: false,
restrictedProperties: properties
}).build();
pipeline.on('error', console.error);
};
const http = require('http');
const server = http.createServer((req, res) => {
const flowData = pipeline.createFlowData();
flowData.evidence.addFromRequest(req);
flowData.process().then(function () {
res.statusCode = 200;
core.Helpers.setResponseHeaders(res, flowData);
res.setHeader('Content-Type', 'text/html');
let output = '';
output = '<h2>User Agent Client Hints Example</h2>';
output += `
<p>
By default, the user-agent, sec-ch-ua and sec-ch-ua-mobile HTTP headers
are sent.
<br />
This means that on the first request, the server can determine the
browser from sec-ch-ua while other details must be derived from the
user-agent.
<br />
If the server determines that the browser supports client hints, then
it may request additional client hints headers by setting the
Accept-CH header in the response.
<br />
Select the <strong>Make second request</strong> button below,
to use send another request to the server. This time, any
additional client hints headers that have been requested
will be included.
</p>
<button type="button" onclick="redirect()">Make second request</button>
<script>
function redirect() {
sessionStorage.reloadAfterPageLoad = true;
window.location.reload(true);
}
window.onload = function () {
if ( sessionStorage.reloadAfterPageLoad ) {
document.getElementById('description').innerHTML = "<p>The information shown below is determined using <strong>User Agent Client Hints</strong> that was sent in the request to obtain additional evidence. If no additional information appears then it may indicate an external problem such as <strong>User Agent Client Hints</strong> being disabled in your browser.</p>";
sessionStorage.reloadAfterPageLoad = false;
}
else{
document.getElementById('description').innerHTML = "<p>The following values are determined by sever-side device detection on the first request.</p>";
}
}
</script>
<div id="evidence">
<strong></br>Evidence values used: </strong>
<table>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
`;
const evidences = pipeline.getElement('device').evidenceKeyFilter.filterEvidence(flowData.evidence.getAll());
for (const key in evidences) {
output += '<tr>';
output += '<td>' + key + '</td>';
output += '<td>' + evidences[key] + '</td>';
output += '</>';
}
output += '</table>';
output += '</div>';
output += '<div id=description></div>';
output += '<div id="content">';
output += '<p>';
output += '<strong>Detection results:</strong></br></br>';
output += '<b>Hardware Vendor:</b> ' + getValueHelper(flowData, 'hardwarevendor');
output += '<br />';
output += '<b>Hardware Name:</b> ' + getValueHelper(flowData, 'hardwarename');
output += '<br />';
output += '<b>Device Type:</b> ' + getValueHelper(flowData, 'devicetype');
output += '<br />';
output += '<b>Platform Vendor:</b> ' + getValueHelper(flowData, 'platformvendor');
output += '<br />';
output += '<b>Platform Name:</b> ' + getValueHelper(flowData, 'platformname');
output += '<br />';
output += '<b>Platform Version:</b> ' + getValueHelper(flowData, 'platformversion');
output += '<br />';
output += '<b>Browser Vendor:</b> ' + getValueHelper(flowData, 'browservendor');
output += '<br />';
output += '<b>Browser Name:</b> ' + getValueHelper(flowData, 'browsername');
output += '<br />';
output += '<b>Browser Version:</b> ' + getValueHelper(flowData, 'browserversion');
output += '<br /></div>';
res.end(output);
});
});
if (process.env.JEST_WORKER_ID === undefined) {
setPipeline(null);
const port = 3001;
server.listen(port);
console.log('Server listening on port: ' + port);
};
module.exports = {
server: server,
setPipeline: setPipeline
};