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
40 from fiftyone_devicedetection_onpremise.devicedetection_onpremise_pipelinebuilder
import DeviceDetectionOnPremisePipelineBuilder
42 from flask.helpers
import make_response
43 from fiftyone_devicedetection_examples.example_utils
import ExampleUtils
45 data_file = ExampleUtils.find_file(
"51Degrees-LiteV4.1.hash")
54 pipeline = DeviceDetectionOnPremisePipelineBuilder(
55 data_file_path = data_file,
57 performance_profile =
'MaxPerformance',
58 auto_update=
False).build()
60 from flask
import Flask, request
67 def get_value_helper(flowdata, engine, property_key):
69 engine_properties = getattr(flowdata, engine)
72 property_value = getattr(engine_properties, property_key)
74 if property_value.has_value():
75 return property_value.value()
77 return property_value.no_value_message()
79 return "Not found in datafile" 88 flowdata = pipeline.create_flowdata()
92 flowdata.evidence.add_from_dict(webevidence(request))
100 output =
"<h2>User Agent Client Hints Example</h2>" 105 By default, the user-agent, sec-ch-ua and sec-ch-ua-mobile HTTP headers 108 This means that on the first request, the server can determine the 109 browser from sec-ch-ua while other details must be derived from the 112 If the server determines that the browser supports client hints, then 113 it may request additional client hints headers by setting the 114 Accept-CH header in the response. 116 Select the <strong>Make second request</strong> button below, 117 to use send another request to the server. This time, any 118 additional client hints headers that have been requested 122 <button type="button" onclick="redirect()">Make second request</button> 125 // This script will run when button will be clicked and device detection request will again 126 // be sent to the server with all additional client hints that was requested in the previous 127 // response by the server. 128 // Following sequence will be followed. 129 // 1. User will send the first request to the web server for detection. 130 // 2. Web Server will return the properties in response based on the headers sent in the request. Along 131 // with the properties, it will also send a new header field Accept-CH in response indicating the additional 132 // evidence it needs. It builds the new response header using SetHeader[Component name]Accept-CH properties 133 // where Component Name is the name of the component for which properties are required. 134 // 3. When "Make second request" button will be clicked, device detection request will again 135 // be sent to the server with all additional client hints that was requested in the previous 136 // response by the server. 137 // 4. Web Server will return the properties based on the new User Agent CLient Hint headers 138 // being used as evidence. 140 function redirect() { 141 sessionStorage.reloadAfterPageLoad = true; 142 window.location.reload(true); 145 window.onload = function () { 146 if ( sessionStorage.reloadAfterPageLoad ) { 147 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>"; 148 sessionStorage.reloadAfterPageLoad = false; 151 document.getElementById('description').innerHTML = "<p>The following values are determined by sever-side device detection on the first request.</p>"; 158 <strong></br>Evidence values used: </strong> 166 evidences = pipeline.get_element(
"device").filter_evidence(flowdata)
167 for key, value
in evidences.items():
169 output +=
"<td>" + str(key) +
"</td>" 170 output +=
"<td>" + str(value) +
"</td>" 175 output +=
"<div id=description></div>" 176 output +=
"<div id=\"content\">" 177 output +=
"<strong>Detection results:</strong></br>" 179 output +=
"<b>Hardware Vendor:</b> " + str(get_value_helper(flowdata,
"device",
"hardwarevendor"))
181 output +=
"<b>Hardware Name:</b> " + str(get_value_helper(flowdata,
"device",
"hardwarename"))
183 output +=
"<b>Device Type:</b> " + str(get_value_helper(flowdata,
"device",
"devicetype"))
185 output +=
"<b>Platform Vendor:</b> " + str(get_value_helper(flowdata,
"device",
"platformvendor"))
187 output +=
"<b>Platform Name:</b> " + str(get_value_helper(flowdata,
"device",
"platformname"))
189 output +=
"<b>Platform Version:</b> " + str(get_value_helper(flowdata,
"device",
"platformversion"))
191 output +=
"<b>Browser Vendor:</b> " + str(get_value_helper(flowdata,
"device",
"browservendor"))
193 output +=
"<b>Browser Name:</b> " + str(get_value_helper(flowdata,
"device",
"browsername"))
195 output +=
"<b>Browser Version:</b> " + str(get_value_helper(flowdata,
"device",
"browserversion"))
196 output +=
"<br /></div>" 200 response = make_response(output)
208 response = set_response_header(flowdata, response)