index.pug

doctype html
html 
  head
    title Web Integration Example
    style.
      a {
        color: #0366d6;
      }

      html {
        font-size: 14px;
      }
      @media (min-width: 768px) {
        html {
          font-size: 16px;
        }
      }
      
      html {
        position: relative;
        min-height: 100%;
      }
      
      body {
        margin-bottom: 60px;
      }
      
      .example-alert {
        border: 2px solid red;
      }

      .used-evidence {
        background-color: lightgreen;
      }

  body
    h2 Web Integration Example 
    p
      | This example demonstrates the use of the Pipeline API to perform device
      | detection within a simple Node web server. In particular, it highlights: 
      ol 
        li
          | Automatic handling of the 'Accept-CH' header, which is used to request 
          | User-Agent Client Hints from the browser 
        li 
          | Client-side evidence collection in order to identify Apple device 
          | models and properties such as screen size.

    h3 Client Hints
    p
      | 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.
    p 
      | 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.

    noscript
      div(class='example-alert')
        | WARNING: JavaScript is disabled in your browser. This means that the 
        | callback discussed further down this page will not fire and UACH
        | headers will not be sent.

    if (new Date().getTime() > dataFilePublishedTime + dataFileAgeWarning)
      div(class='example-alert')
        | WARNING: This example is using a data file that is more than
        | #{dataFileAgeWarning} days old. A more recent data file may be needed 
        | to correctly detect the latest devices, browsers, etc. The latest lite 
        | data file is available from the 
        | #[a(href='https://github.com/51Degrees/device-detection-data') device-detection-data]
        | repository on Github. Find out about the
        | Enterprise data file, which includes automatic daily updates, on our 
        | #[a(href='https://51degrees.com/pricing') pricing page].
    
    div(id='content')
      div(id='response-headers')
        p Response headers returned from server: 
        table 
          tr 
            th Key 
            th Value 
          each value, key in responseHeaders 
            tr 
              td
                b #{key}
              td #{value}

      if (Object.keys(responseHeaders).includes('Accept-CH'))
        div(class='example-alert')
          | WARNING: There is  no Accept-CH header in the response. This may indicate
          | that your browser does not support User-Agent Client Hints. This is not 
          | necessarily a problem, but if you are wanting to try out detection using 
          | User-Agent Client Hints, then make sure that your browser 
          | #[a(href='https://developer.mozilla.org/en-US/docs/Web/API/User-Agent_Client_Hints_API#browser_compatibility') support them]
          |.
      br

      div(id='evidence')
        p Evidence values used: 
        table 
          tr 
            th Key 
            th Value 
          each value, key in allEvidence 
            if evidenceUsed[key] !== undefined
              tr(class="used-evidence")  
                td #{key}
                td #{value}
            else 
              tr 
                td #{key}
                td #{value}
    
      p
        | The following values are determined by server-side device detection on the 
        | first request: 

      table 
        tr 
          th Key 
          th Value 
        tr 
          td 
            b Hardware Vendor: 
          td #{hardwareVendor}
        tr 
          td 
            b Hardware Name: 
          td #{hardwareName}
        tr 
          td 
            b Device Type: 
          td #{deviceType}
        tr 
          td 
            b Platform Vendor: 
          td #{platformVendor}
        tr 
          td 
            b Platform Name: 
          td #{platformName}
        tr 
          td 
            b Platform Version: 
          td #{platformVersion}
        tr 
          td 
            b Browser Vendor: 
          td #{browserVendor}
        tr 
          td 
            b Browser Name: 
          td #{browserName}
        tr 
          td 
            b Browser Version: 
          td #{browserVersion}
        tr 
          td 
            b Screen Width: 
          td #{screenWidth}
        tr 
          td 
            b Screen Height: 
          td #{screenHeight}
      br

      h3 Client-side Evidence and Apple Models 
      p
        | The information shown below is determined after a callback is made to the
        | server with additional evidence that is gathered by JavaScript running 
        | on the client-side. The callback will also include any additional client
        | hints headers that have been requested.
      p 
        | When an Apple device is used, the results from the first request above 
        | will show all Apple models because the server cannot tell the exact model 
        | of the device. In contrast, the results from the callback below will show 
        | a smaller set of possible models.
        | This can be tested to some extend using most emulators, such as those in
        | in the 'developer tools' menu in Google Chrome. However, these are not the 
        | identical to real devices so this can cause some unusual results. Using 
        | real devices will generally be more successful.
      if (dataSourceTier === 'Lite')
        div(class='example-alert')
          | WARNING: You are using the free 'Lite' data file. This does not include 
          | the client-side evidence capabilities of the paid-for data file, so you 
          | will not see any additional data below. Find out about the Enterprise 
          | data file on our #[a(href='https://51degrees.com/pricing') pricing page].

script !{fiftyOneJs}

script.
  window.onload = function () {
      // Subscribe to the 'complete' event.
      fod.complete(function (data) {
          // When the event fires, use the supplied data to populate a new table.
          let fieldValues = [];

          var hardwareName = typeof data.device.hardwarename == "undefined" ?
              "Unknown" : data.device.hardwarename.join(", ")
          fieldValues.push(["Hardware Name: ", hardwareName]);
          fieldValues.push(["Platform: ",
              data.device.platformname + " " + data.device.platformversion]);
          fieldValues.push(["Browser: ",
              data.device.browsername + " " + data.device.browserversion]);
          fieldValues.push(["Screen width (pixels): ", data.device.screenpixelswidth]);
          fieldValues.push(["Screen height (pixels): ", data.device.screenpixelsheight]);
          displayValues(fieldValues);
      });
  }

  // Helper function to add a table that displays the supplied values.
  function displayValues(fieldValues) {
      var table = document.createElement("table");
      var tr = document.createElement("tr");
      addToRow(tr, "th", "Key", false);
      addToRow(tr, "th", "Value", false);
      table.appendChild(tr);

      fieldValues.forEach(function (entry) {
          var tr = document.createElement("tr");
          addToRow(tr, "td", entry[0], true);
          addToRow(tr, "td", entry[1], false);
          table.appendChild(tr);
      });

      var element = document.getElementById("content");
      element.appendChild(table);
  }

  // Helper function to add an entry to a table row.
  function addToRow(row, elementName, text, strong) {
      var entry = document.createElement(elementName);
      var textNode = document.createTextNode(text);
      if (strong === true) {
          var strongNode = document.createElement("strong");
          strongNode.appendChild(textNode);
          textNode = strongNode;
      }
      entry.appendChild(textNode);
      row.appendChild(entry);
  }