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.
Make sure to include all the required properties used by this example.
const require51 = (requestedPackage) => {
try {
return require('/../../../' + requestedPackage);
} catch (e) {
return require(requestedPackage);
}
};
const core = require51('fiftyone.pipeline.core');
require((process.env.directory || __dirname) +
'/../../../deviceDetectionCloudPipelineBuilder');
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 cloud';
}
};
const myResourceKey = process.env.RESOURCE_KEY || '!!YOUR_RESOURCE_KEY!!';
let server;
var pipeline;
const setPipeline = (resourceKey) => {
resourceKey: resourceKey
}).build();
pipeline.on('error', console.error);
};
if (myResourceKey === '!!YOUR_RESOURCE_KEY!!' &&
process.env.JEST_WORKER_ID === undefined) {
console.log('You need to create a resource key at ' +
'https://configure.51degrees.com and paste it into the code, ' +
'replacing !!YOUR_RESOURCE_KEY!!');
} else {
const http = require('http');
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('cloud').evidenceKeyFilter.filterEvidence(flowData.evidence.getAll());
for (const key in evidences) {
if (key.includes('header.user-agent') ||
key.includes('header.sec-ch')) {
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(myResourceKey);
const port = 3000;
server.listen(port);
console.log('Server listening on port: ' + port);
};
}
module.exports = {
server: server,
setPipeline: setPipeline
};