browserslist-useragent-regexp

A utility to compile browserslist query to a RegExp 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 \"module.exports = $(browserslist-useragent-regexp --allowHigherVersions);\" > supportedBrowsers.js"
  }
}

for Windows users

{
  "scripts": {
    "supportedBrowsers": "(echo module.exports = && browserslist-useragent-regexp --allowHigherVersions) > supportedBrowsers.js"
  }
}

3. Run this script, to compile RegExp:

npm run supportedBrowsers
# or
yarn supportedBrowsers

supportedBrowsers.js:

module.exports = /((CPU[ +]OS|iPhone[ +]OS|CPU[ +]iPhone|CPU IPhone OS)[ +]+(11[_\.](3|4)|12[_\.](0|1))(?:[_\.]\d+)?)|(OperaMini(?:\/att)?\/?(\d+)?(?:\.\d+)?(?:\.\d+)?)|(Opera\/.+Opera Mobi.+Version\/46\.0)|(Opera\/46\.0.+Opera Mobi)|(Opera Mobi.+Opera(?:\/|\s+)46\.0)|(SamsungBrowser\/(8|9)\.2)|(Edge\/(17|18)(?:\.0)?)|(HeadlessChrome(?:\/(72|73)\.0\.\d+)?)|((Chromium|Chrome)\/(72|73)\.0(?:\.\d+)?)|(IEMobile[ \/]11\.0)|(Version\/12\.(0|1)(?:\.\d+)?.*Safari\/)|(Trident\/7\.0)|(Firefox\/(65|66)\.0\.\d+)|(Firefox\/(65|66)\.0(pre|[ab]\d+[a-z]*)?)|(([MS]?IE) 11\.0)/;

4. Import RegExp from created file:

const supportedBrowsers = require('./supportedBrowsers');

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

Install

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).

CLI

npx browserslist-useragent-regexp [query] [...options]
# or
yarn exec -- browserslist-useragent-regexp [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 RegExps.
‑‑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:

getUserAgentRegExps(options)

Compile browserslist query to RegExps for each browser.

getUserAgentRegExp(options)

Compile browserslist query to one RegExp.

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.
env	string	—	When multiple browserslist environments are specified, pick the config belonging to this environment.
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.

RegExp info object

Property	Type	Description
family	string	Browser family.
requestVersions	[number, number, number][]	Versions provided by browserslist.
regExp	RegExp	RegExp to match useragent with family and versions.
sourceRegExp	RegExp	Original useragent RegExp, without versions.
resultFixedVersion	[number, number, number] | null	Useragent version of RegExp.
resultMinVersion	[number, number, number] | null	Useragent min version of RegExp.
resultMaxVersion	[number, number, number] | null	Useragent max version of RegExp.

Other

• Supported browsers
• Notes
• When querying for modern browsers