browserslist-useragent-regexp

A utility to compile browserslist query to a regex to test browser useragent. Simplest example: you can detect supported browsers on client-side.

1. Create .browserslistrc config, for example like this:

last 2 versions
not dead

2. Add script to package.json:

{
  "scripts": {
    "supportedBrowsers": "echo \"export default $(browserslist-useragent-regexp --allowHigherVersions);\" > supportedBrowsers.js"
  }
}

{
  "scripts": {
    "supportedBrowsers": "(echo export default && browserslist-useragent-regexp --allowHigherVersions) > supportedBrowsers.js"
  }
}

3. Run this script, to compile regex:

pnpm supportedBrowsers
# or
npm run supportedBrowsers
# or
yarn supportedBrowsers

supportedBrowsers.js:

export default /Edge?\/(10[5-9]|1[1-9]\d|[2-9]\d\d|\d{4,})(\.\d+|)(\.\d+|)|Firefox\/(10[4-9]|1[1-9]\d|[2-9]\d\d|\d{4,})\.\d+(\.\d+|)|Chrom(ium|e)\/(10[5-9]|1[1-9]\d|[2-9]\d\d|\d{4,})\.\d+(\.\d+|)|Maci.* Version\/(15\.([6-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})\.\d+)([,.]\d+|)( Mobile\/\w+|) Safari\/|Chrome.+OPR\/(9\d|\d{3,})\.\d+\.\d+|(CPU[ +]OS|iPhone[ +]OS|CPU[ +]iPhone|CPU IPhone OS|CPU iPad OS)[ +]+(15[._]([6-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})[._]\d+)([._]\d+|)|Opera Mini|Android:?[ /\-](10[6-9]|1[1-9]\d|[2-9]\d{2}|\d{4,})(\.\d+|)(\.\d+|)|Mobile Safari.+OPR\/(6[4-9]|[7-9]\d|\d{3,})\.\d+\.\d+|Android.+Firefox\/(10[5-9]|1[1-9]\d|[2-9]\d\d|\d{4,})\.\d+(\.\d+|)|Android.+Chrom(ium|e)\/(10[6-9]|1[1-9]\d|[2-9]\d\d|\d{4,})\.\d+(\.\d+|)|Android.+(UC? ?Browser|UCWEB|U3)[ /]?(13\.([4-9]|\d{2,})|(1[4-9]|[2-9]\d|\d{3,})\.\d+)\.\d+|SamsungBrowser\/(1[7-9]|[2-9]\d|\d{3,})\.\d+|Android.+MQQBrowser\/(13(\.([1-9]|\d{2,})|)|(1[4-9]|[2-9]\d|\d{3,})(\.\d+|))(\.\d+|)|K[Aa][Ii]OS\/(2\.([5-9]|\d{2,})|([3-9]|\d{2,})\.\d+)(\.\d+|)/;

4. Import regex from created file:

import supportedBrowsers from './supportedBrowsers.js';

if (supportedBrowsers.test(navigator.userAgent)) {
  alert('Your browser is supported.');
}

Install

pnpm add -D browserslist-useragent-regexp
# or
npm i -D browserslist-useragent-regexp
# or
yarn add -D browserslist-useragent-regexp

Why?

As was written in article "Smart Bundling: Shipping legacy code to only legacy browsers": you can determinate, which bundle you should give to browser from server with browserslist-useragent. But in this case you must have your own server with special logic. Now, with browserslist-useragent-regexp, you can move that to client-side.

Development was inspired by this proposal from Mathias Bynens.

How to make differential resource loading and other optimizations with browserslist-useragent-regexp you can read in article "Speed up with Browserslist".

Demo (sources, build script).

Also, testing useragents using generated regex is faster than using the matchesUA method from browserslist-useragent.

CLI

pnpm browserslist-useragent-regexp [query] [...options]
# or
npx browserslist-useragent-regexp [query] [...options]
# or
yarn exec -- browserslist-useragent-regexp [query] [...options]

Also, short alias is available:

pnpm bluare [query] [...options]

| Option | Description | Default | |--------|-------------|---------| | query | Manually provide a browserslist query. Specifying this overrides the browserslist configuration specified in your project. | | | ‑‑help, -h | Print this message. | | | ‑‑verbose, -v | Print additional info about regexes. | | | ‑‑ignorePatch | Ignore differences in patch browser numbers. | true | | ‑‑ignoreMinor | Ignore differences in minor browser versions. | false | | ‑‑allowHigherVersions | For all the browsers in the browserslist query, return a match if the useragent version is equal to or higher than the one specified in browserslist. | false | | ‑‑allowZeroSubversions | Ignore match of patch or patch and minor, if they are 0. | false |

JS API basics

Module exposes two main methods:

getUserAgentRegexes(options)

Compile browserslist query to regexes for each browser.

getUserAgentRegex(options)

Compile browserslist query to one regex.

Description of all methods you can find in Documentation.

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | browsers | string \| string[] | — | Manually provide a browserslist query (or an array of queries). Specifying this overrides the browserslist configuration specified in your project. | | ignorePatch | boolean | true | Ignore differences in patch browser numbers. | | ignoreMinor | boolean | false | Ignore differences in minor browser versions. | | allowHigherVersions | boolean | false | For all the browsers in the browserslist query, return a match if the useragent version is equal to or higher than the one specified in browserslist. | | allowZeroSubversions | boolean | false | Ignore match of patch or patch and minor, if they are 0. |

Any of the browserslist API options may also be provided.

Regex info object

| Property | Type | Description | |----------|------|-------------| | family | string | Browser family. | | requestVersions | [number, number, number][] | Versions provided by browserslist. | | regex | RegExp | Regex to match useragent with family and versions. | | sourceRegex | RegExp | Original useragent regex, without versions. | | version | [number, number, number] \| null | Useragent version of regex. | | minVersion | [number, number, number] \| null | Useragent min version of regex. | | maxVersion | [number, number, number] \| null | Useragent max version of regex. |

Other

• Supported browsers
• Notes
• When querying for modern browsers