From 4d114982cee0cedfb2be9e7f72dfa328908aadd5 Mon Sep 17 00:00:00 2001 From: James Date: Sat, 13 Jun 2026 17:27:56 +0100 Subject: [PATCH 1/7] Style web examples from the shared pattern-library CSS/JS Replace the per-example main.css and inline result-table scripts in the cloud and on-premise getting-started web examples with the shared 51Degrees pattern-library assets. Vendor examples-main.min.css and examples.min.js into each example's static dir and rewrite both Flask templates to the c-eg-* class contract. The client-side detection callback now uses fodExamples.bindDeviceCallback from the shared examples.min.js, so the duplicated inline scripts are gone. Add the example-assets-update workflow so the shared assets are refreshed weekly from the documentation release via the common-ci reusable workflow. --- .github/workflows/example-assets-update.yml | 19 ++ .../static/css/examples-main.min.css | 1 + .../gettingstarted_web/static/css/main.css | 42 --- .../static/js/examples.min.js | 1 + .../gettingstarted_web/templates/index.html | 265 ++++++----------- .../static/css/examples-main.min.css | 1 + .../gettingstarted_web/static/css/main.css | 42 --- .../static/js/examples.min.js | 1 + .../gettingstarted_web/templates/index.html | 281 +++++++----------- 9 files changed, 217 insertions(+), 436 deletions(-) create mode 100644 .github/workflows/example-assets-update.yml create mode 100644 fiftyone_devicedetection_examples/src/fiftyone_devicedetection_examples/cloud/gettingstarted_web/static/css/examples-main.min.css delete mode 100644 fiftyone_devicedetection_examples/src/fiftyone_devicedetection_examples/cloud/gettingstarted_web/static/css/main.css create mode 100644 fiftyone_devicedetection_examples/src/fiftyone_devicedetection_examples/cloud/gettingstarted_web/static/js/examples.min.js create mode 100644 fiftyone_devicedetection_examples/src/fiftyone_devicedetection_examples/onpremise/gettingstarted_web/static/css/examples-main.min.css delete mode 100644 fiftyone_devicedetection_examples/src/fiftyone_devicedetection_examples/onpremise/gettingstarted_web/static/css/main.css create mode 100644 fiftyone_devicedetection_examples/src/fiftyone_devicedetection_examples/onpremise/gettingstarted_web/static/js/examples.min.js diff --git a/.github/workflows/example-assets-update.yml b/.github/workflows/example-assets-update.yml new file mode 100644 index 000000000..dfbd3e5d6 --- /dev/null +++ b/.github/workflows/example-assets-update.yml @@ -0,0 +1,19 @@ +name: Example Assets Update + +# Refreshes the shared web-example CSS/JS (examples-main) committed in this repo +# from the latest examples-assets release, via the common-ci reusable workflow. +# The assets change rarely, so this runs weekly and only opens a PR if they +# changed. common-ci is not a submodule; it is referenced as a reusable workflow. + +on: + workflow_dispatch: + schedule: + - cron: '0 3 * * 1' + +jobs: + Example_Assets_Update: + uses: 51Degrees/common-ci/.github/workflows/nightly-example-assets-update.yml@main + with: + repo-name: ${{ github.event.repository.name }} + secrets: + token: ${{ secrets.ACCESS_TOKEN }} diff --git a/fiftyone_devicedetection_examples/src/fiftyone_devicedetection_examples/cloud/gettingstarted_web/static/css/examples-main.min.css b/fiftyone_devicedetection_examples/src/fiftyone_devicedetection_examples/cloud/gettingstarted_web/static/css/examples-main.min.css new file mode 100644 index 000000000..42a9f40d7 --- /dev/null +++ b/fiftyone_devicedetection_examples/src/fiftyone_devicedetection_examples/cloud/gettingstarted_web/static/css/examples-main.min.css @@ -0,0 +1 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.a-size--10{width:.1615055829rem;height:.1615055829rem}.a-size--9{width:.1938066995rem;height:.1938066995rem}.a-size--8{width:.2325680394rem;height:.2325680394rem}.a-size--7{width:.2790816472rem;height:.2790816472rem}.a-size--6{width:.3348979767rem;height:.3348979767rem}.a-size--5{width:.401877572rem;height:.401877572rem}.a-size--4{width:.4822530864rem;height:.4822530864rem}.a-size--3{width:.5787037037rem;height:.5787037037rem}.a-size--2{width:.6944444444rem;height:.6944444444rem}.a-size--1{width:.8333333333rem;height:.8333333333rem}.a-size-0{width:1rem;height:1rem}.a-size-1{width:1.2rem;height:1.2rem}.a-size-2{width:1.44rem;height:1.44rem}.a-size-3{width:1.728rem;height:1.728rem}.a-size-4{width:2.0736rem;height:2.0736rem}.a-size-5{width:2.48832rem;height:2.48832rem}.a-size-6{width:2.985984rem;height:2.985984rem}.a-size-7{width:3.5831808rem;height:3.5831808rem}.a-size-8{width:4.29981696rem;height:4.29981696rem}.a-size-9{width:5.159780352rem;height:5.159780352rem}.a-size-10{width:6.1917364224rem;height:6.1917364224rem}.a-size-11{width:7.4300837069rem;height:7.4300837069rem}.a-size-12{width:8.9161004483rem;height:8.9161004483rem}.a-size-13{width:10.6993205379rem;height:10.6993205379rem}.a-size-14{width:12.8391846455rem;height:12.8391846455rem}.a-size-15{width:15.4070215746rem;height:15.4070215746rem}.a-size-16{width:18.4884258895rem;height:18.4884258895rem}.a-size-17{width:22.1861110674rem;height:22.1861110674rem}.a-size-18{width:26.6233332809rem;height:26.6233332809rem}.a-size-19{width:31.9479999371rem;height:31.9479999371rem}.a-size-20{width:38.3375999245rem;height:38.3375999245rem}.a-font-size--10{font-size:.1615055829rem}.a-font-size--9{font-size:.1938066995rem}.a-font-size--8{font-size:.2325680394rem}.a-font-size--7{font-size:.2790816472rem}.a-font-size--6{font-size:.3348979767rem}.a-font-size--5{font-size:.401877572rem}.a-font-size--4{font-size:.4822530864rem}.a-font-size--3{font-size:.5787037037rem}.a-font-size--2{font-size:.6944444444rem}.a-font-size--1{font-size:.8333333333rem}.a-font-size-0{font-size:1rem}.a-font-size-1{font-size:1.2rem}.a-font-size-2{font-size:1.44rem}.a-font-size-3{font-size:1.728rem}.a-font-size-4{font-size:2.0736rem}.a-font-size-5{font-size:2.48832rem}.a-font-size-6{font-size:2.985984rem}.a-font-size-7{font-size:3.5831808rem}.a-font-size-8{font-size:4.29981696rem}.a-font-size-9{font-size:5.159780352rem}.a-font-size-10{font-size:6.1917364224rem}.a-font-size-11{font-size:7.4300837069rem}.a-font-size-12{font-size:8.9161004483rem}.a-font-size-13{font-size:10.6993205379rem}.a-font-size-14{font-size:12.8391846455rem}.a-font-size-15{font-size:15.4070215746rem}.a-font-size-16{font-size:18.4884258895rem}.a-font-size-17{font-size:22.1861110674rem}.a-font-size-18{font-size:26.6233332809rem}.a-font-size-19{font-size:31.9479999371rem}.a-font-size-20{font-size:38.3375999245rem}.a-font--default{font-family:Arial,sans-serif}.a-font--code{font-family:Consolas,monospace}.b-text--hidden{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.b-text--default{font-family:Arial,sans-serif;font-size:1rem;color:#252525}.b-text--count{font-family:Arial,sans-serif;font-size:.6944444444rem;color:#9b9b9b}.b-text--count-pill{font-family:Arial,sans-serif;font-size:.6944444444rem;color:#9b9b9b;border:1px solid #BAC82A;border-radius:28px;padding:.093463879rem .4822530864rem;color:#252525;background-color:#fff;display:inline}.b-text--property-pill{font-family:Arial,sans-serif;font-size:.8333333333rem;color:#646060}.b-text--heading-1{font-family:Arial,sans-serif;font-weight:700;font-size:1.44rem;color:#252525;margin:0 0 1.728rem}.b-text--heading-2{font-family:Arial,sans-serif;font-weight:700;font-size:1.2rem;color:#252525;margin:0 0 1.44rem}.b-text--heading-3{font-family:Arial,sans-serif;font-weight:700;font-size:1rem;color:#252525;margin:0 0 1.2rem}.b-text--code{font-family:Consolas,monospace;font-size:.8333333333rem;color:#646060}.b-text--code-snip{font-family:Consolas,monospace;font-size:.8333333333rem;color:#646060;background-color:#fff;border-radius:5px;border:1px solid #EAEAEA;padding:0 .2325680394rem}.b-text--heading-caps{font-family:Arial,sans-serif;font-size:.6944444444rem;color:#252525;font-weight:400;text-transform:uppercase;letter-spacing:.5px}.b-text--copyright{font-family:Arial,sans-serif;font-size:.6944444444rem;color:#252525}.b-text--progress{font-family:Arial,sans-serif;font-size:.8333333333rem}@media(min-width:769px){.b-text--progress{font-size:1rem}}.b-text--progress{color:#252525;letter-spacing:.7px;text-transform:uppercase;font-weight:700}.b-text--red{color:#cc2b27}body{font-family:Arial,sans-serif;font-size:1rem;color:#252525;margin:0;line-height:1.5}*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box}.b-link{transition:color .3s ease;color:#252525;text-decoration:underline}.b-link:active,.b-link:hover,.b-link:focus{color:#f5841f;text-decoration:underline}.b-link{display:inline-flex;align-items:center}.b-link img{margin:0 .5787037037rem}.b-link--property{font-family:Arial,sans-serif;font-size:.8333333333rem;color:#646060;color:#9b9b9b;border-bottom:2px dotted #EAEAEA;text-decoration:none}.b-link--property:active,.b-link--property:hover,.b-link--property:focus{color:#646060;border-bottom:2px dotted #646060;text-decoration:none}.b-link--dotted{color:#9b9b9b;border-bottom:2px dotted #EAEAEA;text-decoration:none}.b-link--dotted:active,.b-link--dotted:hover,.b-link--dotted:focus{color:#646060;border-bottom:2px dotted #646060;text-decoration:none}.b-link--unstyled{color:inherit;text-decoration:none}.b-link--unstyled:active,.b-link--unstyled:hover,.b-link--unstyled:focus{color:inherit;text-decoration:none}.b-link--docs{transition:color .3s ease;color:#00aeef;text-decoration:none;font-weight:700}.b-link--docs:active,.b-link--docs:hover,.b-link--docs:focus{text-decoration:underline}a.anchor{scroll-margin-top:128px}.b-btn{font-family:Arial,sans-serif;font-size:1rem;color:#252525;color:inherit;text-decoration:none}.b-btn:active,.b-btn:hover,.b-btn:focus{color:inherit;text-decoration:none}.b-btn{display:inline-flex;justify-content:center;align-items:center;padding:.8333333333rem 1.728rem;border:1px solid #BAC82A;background-color:#cbdb2a;cursor:pointer}.b-btn:active,.b-btn:hover,.b-btn:focus{background-color:#daed1a;border:1px solid #CBDB2A;text-decoration:none}.b-btn.b-btn--disabled,.b-btn:disabled{background-color:#f8f8f8;border:1px solid #EAEAEA;color:#646060;cursor:not-allowed;pointer-events:all!important}@media(min-width:769px){.b-btn--large{padding:1.2rem 2.48832rem}}.b-btn--secondary{background-color:#fff}.b-btn--secondary:active,.b-btn--secondary:hover,.b-btn--secondary:focus{background-color:#fff}.b-btn--block{width:100%}.b-btn__icon{margin-right:1rem}.b-btn__icon--after{margin-right:0;margin-left:1rem}input[type=text]{-webkit-appearance:none;-moz-appearance:none;appearance:none}.b-label{color:#646060;font-size:.8333333333rem;margin-bottom:.4822530864rem;width:100%}.b-input-group{display:flex;flex-direction:column}@media(min-width:769px){.b-input-group{flex-direction:row}}.b-input{font-family:Arial,sans-serif;font-size:1rem;color:#252525;border:solid 1px #646060;padding:.8333333333rem;line-height:1.2}.b-form-group--with-icon .b-input{padding-left:46px}.b-input::placeholder{color:#bfbfbf;opacity:1}.b-input,.b-input--block{width:100%}.b-form-group{display:flex;flex-direction:column}.b-form-group .b-btn{margin-top:1rem}@media(min-width:769px){.b-form-group .b-btn{margin-top:0;margin-left:.8333333333rem}}.b-form-group--with-icon{position:relative}.b-form-group--with-icon .b-icon{position:absolute;width:20px;height:20px;top:14px;left:10px}.c-eg-page{max-width:800px;margin:0 auto;padding:1.44rem 1.2rem}.c-eg-page__title{font-family:Arial,sans-serif;font-weight:700;font-size:1.2rem;color:#252525;margin:0 0 1.44rem}.c-eg-page__heading{font-family:Arial,sans-serif;font-weight:700;font-size:1rem;color:#252525;margin:1.728rem 0 1.2rem}.c-eg-page__lead{margin-bottom:1.44rem}.c-eg-section{margin-bottom:1.728rem}.c-eg-alert{font-family:Arial,sans-serif;font-size:1rem;color:#252525;border:1px solid #CC2B27;border-radius:5px;background-color:#fef1f9;padding:.8333333333rem 1rem;margin:1.2rem 0}.c-eg-alert a{color:#cc2b27;font-weight:700}.c-eg-table{font-family:Arial,sans-serif;font-size:1rem;color:#252525;width:100%;max-width:800px;font-size:.8333333333rem;background-color:#fff;border-collapse:collapse;margin-bottom:1.2rem}.c-eg-table__head .c-eg-table__cell{font-weight:700;border-bottom:3px solid #EAEAEA}.c-eg-table__cell{padding:.5787037037rem .6944444444rem;text-align:left;vertical-align:top;border-bottom:1px solid #EAEAEA}.c-eg-table__cell--key{font-weight:700;white-space:nowrap}.c-eg-table__cell ul{margin:0;padding-left:1rem}.c-eg-table__row--used{background-color:#f9fbe9}.c-eg-table__row--present,.c-eg-table__row--alt{background-color:#f8f8f8}.c-eg-legend{font-size:.6944444444rem;color:#646060;margin-bottom:.6944444444rem}.c-eg-legend__swatch{padding:0 .4822530864rem;border-radius:5px}.c-eg-legend__swatch--used{background-color:#f9fbe9}.c-eg-legend__swatch--present{background-color:#f8f8f8}.c-eg-form{margin-bottom:1.44rem}.c-eg-form__row{display:flex;flex-direction:column}@media(min-width:769px){.c-eg-form__row{flex-direction:row;align-items:flex-end}}.c-eg-form .b-btn{margin-top:.8333333333rem}@media(min-width:769px){.c-eg-form .b-btn{margin-top:0;margin-left:.8333333333rem}}.c-eg-map{margin:1.44rem 0}.c-eg-map__title{font-family:Arial,sans-serif;font-weight:700;font-size:1rem;color:#252525;margin:0 0 1.2rem}.c-eg-map__canvas{height:400px;width:100%;border:1px solid #EAEAEA;border-radius:5px}.c-eg-columns{display:grid;grid-template-columns:1fr;gap:1.44rem}@media(min-width:993px){.c-eg-columns{grid-template-columns:1fr 1fr}}.c-eg-details{margin:1.2rem 0 1.44rem;border:1px solid #EAEAEA;border-radius:5px;padding:0 1rem}.c-eg-details>summary{cursor:pointer;padding:.6944444444rem 0;font-weight:700}.c-eg-button-row{margin:1.2rem 0 1.44rem}.c-eg-message{display:flex;flex-direction:column;align-items:flex-start;gap:.8333333333rem;margin-top:2.0736rem;padding:1rem 1.2rem;background:#f8f8f8;border:1px solid #EAEAEA;border-radius:5px}@media(min-width:769px){.c-eg-message{flex-direction:row;align-items:center;justify-content:space-between;gap:1.2rem}}.c-eg-message__text{margin:0}.c-eg-message__cta{flex-shrink:0} diff --git a/fiftyone_devicedetection_examples/src/fiftyone_devicedetection_examples/cloud/gettingstarted_web/static/css/main.css b/fiftyone_devicedetection_examples/src/fiftyone_devicedetection_examples/cloud/gettingstarted_web/static/css/main.css deleted file mode 100644 index 2c9e85c72..000000000 --- a/fiftyone_devicedetection_examples/src/fiftyone_devicedetection_examples/cloud/gettingstarted_web/static/css/main.css +++ /dev/null @@ -1,42 +0,0 @@ - -body { - margin: 2em; - font-family: sans-serif; -} -table { - max-width: 800px; - font-size: smaller; - background-color: lightblue; -} -tr + td { - width: 15%; - max-width: 800px; -} -td { - padding: 5px; - -} -.lightred { - background-color: lightpink; -} -.lightyellow { - background-color: lightyellow; -} -.lightgreen { - background-color: lightgreen; -} - -.smaller { - font-size: smaller; -} -.main { - max-width: 800px; - margin-left: auto; - margin-right: auto; -} - -.example-alert { - border: 2px solid red; -} - - \ No newline at end of file diff --git a/fiftyone_devicedetection_examples/src/fiftyone_devicedetection_examples/cloud/gettingstarted_web/static/js/examples.min.js b/fiftyone_devicedetection_examples/src/fiftyone_devicedetection_examples/cloud/gettingstarted_web/static/js/examples.min.js new file mode 100644 index 000000000..2450d2057 --- /dev/null +++ b/fiftyone_devicedetection_examples/src/fiftyone_devicedetection_examples/cloud/gettingstarted_web/static/js/examples.min.js @@ -0,0 +1 @@ +(function(d){"use strict";var f={};f.bindDeviceCallback=function(e){if(e=e||{},!(typeof d.fod>"u"||!d.fod.complete)){var a=e.targetId||"content",r=e.fields||C;d.fod.complete(function(i){_(a,r(i))})}};function C(e){var a=e&&e.device||{},r=typeof a.hardwarename>"u"?"Unknown":[].concat(a.hardwarename).join(", ");return[["Hardware Name:",r],["Platform:",m(a.platformname,a.platformversion)],["Browser:",m(a.browsername,a.browserversion)],["Screen width (pixels):",a.screenpixelswidth],["Screen height (pixels):",a.screenpixelsheight]]}function m(e,a){return[e,a].filter(function(r){return r!=null&&r!==""}).join(" ")}function _(e,a){var r=document.getElementById(e);if(r){var i=document.createElement("table");i.className="c-eg-table";var t=document.createElement("tr");t.className="c-eg-table__row c-eg-table__head",o(t,"th","Key",!1),o(t,"th","Value",!1),i.appendChild(t),a.forEach(function(l){var n=document.createElement("tr");n.className="c-eg-table__row c-eg-table__row--used",o(n,"td",l[0],!0),o(n,"td",l[1],!1),i.appendChild(n)}),r.appendChild(i)}}function o(e,a,r,i){var t=document.createElement(a);t.className="c-eg-table__cell"+(i?" c-eg-table__cell--key":"");var l=document.createTextNode(r??"");if(i){var n=document.createElement("strong");n.appendChild(l),l=n}t.appendChild(l),e.appendChild(t)}f.initLocationMap=function(e){e=e||{};var a=d.L;if(a){var r=e.sectionId||"map-section",i=e.canvasId||"map",t=e.areasWkt||"",l=e.latitude,n=e.longitude,v=e.labels||{ipLocation:"IP Location",lat:"Lat",lng:"Lng"},h=e.tileUrl||"https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png",w={attribution:"\xA9 OpenStreetMap contributors \xA9 CARTO",subdomains:"abcd",maxZoom:19};if(c(t)&&t!=="POLYGON EMPTY"&&d.wellknown){u(r,!0);var s=a.map(i);a.tileLayer(h,w).addTo(s);try{var g=d.wellknown.parse(t);if(g){var E=a.geoJSON(g,{style:{color:"#CC2B27",weight:2,opacity:.8,fillColor:"#CC2B27",fillOpacity:.2}}).addTo(s);s.fitBounds(E.getBounds()),p(a,s,l,n,v)}}catch(k){console.error("Error parsing polygon:",k),u(r,!1)}}else if(c(l)&&c(n)){var b=parseFloat(l),N=parseFloat(n);if(!isNaN(b)&&!isNaN(N)){u(r,!0);var y=a.map(i).setView([b,N],10);a.tileLayer(h,w).addTo(y),p(a,y,l,n,v)}}}};function p(e,a,r,i,t){if(!(!c(r)||!c(i))){var l=parseFloat(r),n=parseFloat(i);isNaN(l)||isNaN(n)||e.marker([l,n]).addTo(a).bindPopup(t.ipLocation+"
"+t.lat+": "+l+"
"+t.lng+": "+n).openPopup()}}function u(e,a){var r=document.getElementById(e);r&&(r.style.display=a?"block":"none")}function c(e){return e&&String(e).indexOf("Unknown")===-1&&e!=="0"&&e!==""}d.fodExamples=f})(window); diff --git a/fiftyone_devicedetection_examples/src/fiftyone_devicedetection_examples/cloud/gettingstarted_web/templates/index.html b/fiftyone_devicedetection_examples/src/fiftyone_devicedetection_examples/cloud/gettingstarted_web/templates/index.html index 525ff3bb7..480b88195 100644 --- a/fiftyone_devicedetection_examples/src/fiftyone_devicedetection_examples/cloud/gettingstarted_web/templates/index.html +++ b/fiftyone_devicedetection_examples/src/fiftyone_devicedetection_examples/cloud/gettingstarted_web/templates/index.html @@ -22,149 +22,127 @@ * ********************************************************************* #} Web Integration Example - + -
-

Web Integration Example

- -

+

+

Web integration example

+

This example demonstrates the use of the Pipeline API to perform device detection within a - simple Flask web project. In particular, it highlights: -

    -
  1. - Automatic handling of the 'Accept-CH' header, which is used to request User-Agent - Client Hints from the browser -
    2. -
  2. - Client-side evidence collection in order to identify Apple device models and properties - such as screen size. -
    3. -
-

-

Client Hints

-

- When the first request is made, browsers that support client hints will typically send a subset - of client hints values along with the User-Agent header. - If device detection determines that the browser does support client hints then it will request - that additional client hints headers are sent with future requests by sending the Accept-CH - header with the response. + simple Flask web project. It highlights automatic handling of the Accept-CH header, used to + request User-Agent Client Hints from the browser, and client-side evidence collection to + identify Apple device models and properties such as screen size.

-

- Note that if you have visited this page previously, the value of Accept-CH will have been - cached so all requested client hints headers will be sent on the first request. Using features - such as 'private browsing' or 'incognito mode' will allow you to see the true first request - experience as the previous Accept-CH value will not be used. +

+ When the first request is made, browsers that support client hints will typically send a + subset of client hints values along with the User-Agent header. If device detection determines + that the browser does support client hints then it will request that additional client hints + headers are sent with future requests by sending the Accept-CH header with the response. Note + that if you have visited this page previously the Accept-CH value will have been cached, so all + requested headers will be sent on the first request. Private browsing or incognito mode will + let you see the true first request experience.