Giter VIP home page Giter VIP logo

client-hints's Introduction

client-hints

๐Ÿ•ต๏ธโ€โ™‚๏ธ Parse client hints headers

Use client hints, where available

import { ClientHints } from "client-hints";
import { userAgentParser } from "some-user-agent-parser-library";

app.get("/api-endpoint", (req, res) => {
  const hints = new ClientHints(req);

  const isMobile =
    hints.mobile ?? // cheap
    userAgentParser(req.get("user-agent")).device?.type === "mobile"; // more expensive

  const browserName =
    hints.vendorName ?? // cheap
    userAgentParser(req.get("user-agent")).browser?.name; // more expensive

  console.log(JSON.stringify(hints, null, 2)); // Serialises all available hints

  res.send(`${isMobile ? "Mobile" : "Desktop"} browser: ${browserName}`);
});

Available detections

All detections return undefined if the relevant header is not available.

Feature Type Header Meaning Adoption level
arch, architecture string Sec-CH-UA-Arch CPU architecture Experimental
contentDpr, contentDevicePixelRatio number Content-DPR Image device pixel ratio Deprecated
deviceMemory number Device-Memory Appr. available RAM Experimental
downlink number Downlink Network speed (Mbps) Experimental
dpr, devicePixelRatio number DPR Device pixel ratio Deprecated
dpr, devicePixelRatio string Content-DPR Image device to pixel ratio Experimental
ect, effectiveConnectionType string ECT Network profile (G) Experimental
fetchDest, fetchDestination string Sec-Fetch-Dest Resource type
fetchMode string Sec-Fetch-Mode Navigation type
fetchSite string Sec-Fetch-Site Relationship to origin
fetchUser boolean Sec-Fetch-User Was the request triggered by user action
gpc boolean Sec-GPC Consents to sell or share personal information Experimental
mobile boolean Sec-CH-UA-Mobile Boolean: Is this a mobile device Experimental
model string Sec-CH-UA-Model Device model Experimental
platform string Sec-CH-UA-Platform Operating system name Experimental
platformVersion string Sec-CH-UA-Platform-Version Operating system version Experimental
purpose string Sec-Purpose Resource purpose (prefetch) Experimental
vendorName string Sec-CH-UA / Sec-CH-UA-Full-Version-List Browser Name Experimental
vendorVersion string Sec-CH-UA-Full-Version / Sec-CH-UA / Sec-CH-UA-Full-Version-List Browser version Experimental
viewportWidth number Viewport-Width Layout viewport width Deprecated
width number Width Resource desired width Deprecated

Client Hints Intruction Response Header

Set the value of Accept-CH header to include the headers you want the browse to send.

Accept-CH: Sec-CH-UA-Mobile,Sec-CH-UA-Full-Version,Sec-CH-UA-Full-Version-List,Sec-CH-UA-Model,Sec-CH-UA-Platform,Sec-CH-UA-Platform-Version,ECT

Include all available hints:

Accept-CH: *

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.