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.

Create .browserslistrc config, for example like this:

last 2 versions
not dead

Add script to package.json:

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

for Windows users

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

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+|)/;

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.