HTTP Client Hints

Access and use HTTP Client Hints in your application. Detect the client browser and the operating system on your server.

Features

• 🚀 Browser and Operating System detection: check detect-browser-es for more information.
• 💥 Device Hints detection
• ⚡ Network Hints detection
• ✨ Critical Hints detection

HTTP Client hints

[!WARNING] The HTTP Client hints headers listed below are still in draft and only Chromium based browsers support them: Chrome, Edge, Chromium and Opera.

The module includes support for the following HTTP Client hints:

• Device Hints
  • Device-Memory
• Network Hints
  • Save-Data
  • Downlink
  • ECT
  • RTT
• User Agent Hints
  • Sec-CH
  • Sec-CH-UA
  • Sec-CH-UA-Mobile
  • Sec-CH-UA-Platform
  • Sec-CH-UA-Arch
  • Sec-CH-UA-Model
  • Sec-CH-UA-Platform-Version
  • Sec-CH-UA-Bitness
• Critical Client Hints
  • Sec-CH-Width
  • Sec-CH-DPR
  • Sec-CH-Viewport-Width
  • Sec-CH-Viewport-Height
  • Sec-CH-Prefers-Color-Scheme
  • Sec-CH-Prefers-Reduced-Motion
  • Sec-CH-Prefers-Reduced-Transparency

Quick Setup

Install the package you want to use in your application, this package exports each client hint separately, or you can use the default to use all the hints.

import {
  extractBrowserHints,
  extractCriticalHints,
  extractDeviceHints,
  extractNetworkHints,
} from 'http-client-hints'

or

import { extractBrowserHints } from 'http-client-hints/browser'
import { extractCriticalHints } from 'http-client-hints/critical'
import { extractDeviceHints } from 'http-client-hints/device'
import { extractNetworkHints } from 'http-client-hints/network'

You can also use require (CommonJS: CJS), the package has been built with dual ESM and CJS support.

const {
  extractBrowserHints,
  extractCriticalHints,
  extractDeviceHints,
  extractNetworkHints,
} = require('http-client-hints')

or

const { extractBrowserHints } = require('http-client-hints/browser')
const { extractCriticalHints } = require('http-client-hints/critical')
const { extractDeviceHints } = require('http-client-hints/device')
const { extractNetworkHints } = require('http-client-hints/network')

You can also use this package when using H3:

import { extractImageClientHints } from 'http-client-hints/h3'

If you want to use this package in your Nuxt application, check Nuxt HTTP Client Hints Module.

That's it! You can now use HTTP Client Hints in your server application ✨

You can check the source code or the JSDocs for more information.

License

MIT License © 2024-PRESENT Joaquín Sánchez