detect-browser-es

detect-browser-es

ESM build of detect-browser with server info via std-env.

Usage

Install:

# pnpm
pnpm add detect-browser-es

# npm
npm i detect-browser-es

# yarn
yarn add detect-browser-es

Import:

// ESM
import { detect } from 'detect-browser-es'

// CommonJS
const { detect } = require('detect-browser-es')

Deprecations

NodeInfo and getNodeVersion have been deprecated and replaced with ServerInfo and getServerVersion respectively.

Breaking changes

Calling detect function returns ServerInfo instead NodeInfo. If you still want to use NodeInfo, use deprecated getNodeVersion function.

New Features

• Detect Happy DOM and jsdom when using test environments like Vitest (check the test folder).
• Detect WebdriverIO when using @wdio/browser-runner runner.
• ServerInfo via std-env with provider and runtime detection.
• User-Agent Client Hints API client and server detection: via new asyncDetect function.
• Windows 11 detection when using the new asyncDetect function (there is no way to detect Windows 11 using only user-agent).

User-Agent Client Hints API

The new asyncDetect function should be used when you need to detect Windows 11 or any User-Agent Client Hints, otherwise you can still use the detect function.

To access the low-entropy User-Agent Client Hints values (mobile, platform and brands ), you don't need to use the asyncDetect function, you can use the navigator.userAgentData object when available in the browser (check browser compatibility), or using lookupServerUserAgentHints function for server.

Windows 11 detection

There is no way to detect Windows 11 using only user-agent, you need to use the asyncDetect function or the serverResponseHeadersForUserAgentHints function and will work only on Chromium based and Opera browsers (those supporting the User-Agent Client Hints API).

To detect Windows 11 in the browser, you need to use the asyncDetect function providing platformVersion in the options.hints array.

To detect Windows 11 in the server, you need to send Accept-CH http response header to the client with the corresponding Sec-CH-UA-* values. You can use the serverResponseHeadersForUserAgentHints function providing the required entries for your application, it will return the corresponding Accept-CH header. The function accepts the hint names you use in the browser, you don't need to worry about http header names.

Testing

To run the tests, from root folder run nr dev or nr test (with coverage), the script will run:

• the original tests from detect-browser
• Happy DOM and jsdom tests, except WebdriverIO detection: Happy DOM v15.7.3 seems to omit the version (https://github.com/capricorn86/happy-dom/issues/1528)
• User-Agent Client Hints server detection
• Windows 11 server detection
• Accept-CH response header generation

To run tests using Vitest Browser with WebdriverIO, run one of the following commands:

• nr test:chrome: Chrome must be installed
• nr test:edge: Edge must be installed
• nr test:firefox: Firefox must be installed
• nr test:safari: Safari must be installed and only on macOS machine

To test WebdriverIO detection, run one of the following commands (will not work, there is a bug in @wdio/browser-runner):

• nr wdio:chrome: Chrome must be installed
• nr wdio:edge: Edge must be installed
• nr wdio:firefox: Firefox must be installed
• nr wdio:safari: Safari must be installed and only on macOS machine

License

MIT