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": "browserslist-useragent-regexp --allowHigherVersions -o supportedBrowsers.js"
  }
}

or supportedBrowsers.ts for typescript.

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.');
}

for ts

import {SupportedBrowsers} from './supportedBrowsers';

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