| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| body { |
| color: white; |
| } |
| .title { |
| font-size: 24px; |
| } |
| .subtitle { |
| font-size: 20px; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="title">User-Agent Client Hints Demo</div> |
| <div id="brands" class="subtitle">Brands</div> |
| <div id="mobile" class="subtitle">Mobile indicator</div> |
| <div id="full" class="subtitle">Full User-Agent Data</div> |
| |
| <script type="text/javascript"> |
| // Enable User-Agent Client Hints API |
| h5vcc.settings.set("NavigatorUAData", 1); |
| |
| if (navigator.userAgentData) { |
| var brands_result = document.createElement("div"); |
| brands_result.innerHTML = JSON.stringify(navigator.userAgentData.brands, null, " "); |
| brands_result.style.fontSize = "16px"; |
| var brands_element = document.getElementById("brands"); |
| brands_element.appendChild(brands_result); |
| |
| var mobile_result = document.createElement("div"); |
| mobile_result.innerHTML = navigator.userAgentData.mobile; |
| mobile_result.style.fontSize = "16px"; |
| var mobile_element = document.getElementById("mobile"); |
| mobile_element.appendChild(mobile_result); |
| |
| navigator.userAgentData.getHighEntropyValues( |
| ["architecture", "bitness", "model", "platformVersion", |
| "uaFullVersion", "cobaltBuildNumber", "cobaltBuildConfiguration", |
| "jsEngineVersion", "rasterizer", "evergreenVersion", |
| "starboardVersion", "originalDesignManufacturer", |
| "deviceType", "chipset", "modelYear", "deviceBrand", |
| "connectionType", "aux"]) |
| .then(ua => { |
| // Cobalt returns a CobaltUADataValuesInterface object instead of a |
| // dictionary as dictionary promises are currently not supported. |
| // Thus we must reconstruct the dictionary from the interface object |
| // returned from getHighEntropyValues(). |
| var full_JSON = new Object(); |
| full_JSON.architecture = ua.architecture; |
| full_JSON.bitness = ua.bitness; |
| full_JSON.model = ua.model; |
| full_JSON.platformVersion = ua.platformVersion; |
| full_JSON.uaFullVersion = ua.uaFullVersion; |
| full_JSON.cobaltBuildNumber = ua.cobaltBuildNumber; |
| full_JSON.cobaltBuildConfiguration = ua.cobaltBuildConfiguration; |
| full_JSON.jsEngineVersion = ua.jsEngineVersion; |
| full_JSON.rasterizer = ua.rasterizer; |
| full_JSON.evergreenVersion = ua.evergreenVersion; |
| full_JSON.starboardVersion = ua.starboardVersion; |
| full_JSON.originalDesignManufacturer = ua.originalDesignManufacturer; |
| full_JSON.deviceType = ua.deviceType; |
| full_JSON.chipset = ua.chipset; |
| full_JSON.modelYear = ua.modelYear; |
| full_JSON.deviceBrand = ua.deviceBrand; |
| full_JSON.connectionType = ua.connectionType; |
| full_JSON.aux = ua.aux; |
| |
| var full_result = document.createElement("div"); |
| full_result.innerHTML = JSON.stringify(full_JSON, null, " "); |
| full_result.style.fontSize = "16px"; |
| var full_element = document.getElementById("full"); |
| full_element.appendChild(full_result); |
| }); |
| } else { |
| console.log("User-Agent Client Hints API not enabled"); |
| } |
| </script> |
| </body> |
| </html> |
