A utility to compile browserslist query to a RegExp to test browser useragent.
npm install @ad2302/browserslist-useragent-regexp[![NPM version][npm]][npm-url]
[![Node version][node]][node-url]
[![Dependencies status][deps]][deps-url]
[![Build status][build]][build-url]
[![Coverage status][coverage]][coverage-url]
[![Dependabot badge][dependabot]][dependabot-url]
[![Documentation badge][documentation]][documentation-url]
[npm]: https://img.shields.io/npm/v/browserslist-useragent-regexp.svg
[npm-url]: https://npmjs.com/package/browserslist-useragent-regexp
[node]: https://img.shields.io/node/v/browserslist-useragent-regexp.svg
[node-url]: https://nodejs.org
[deps]: https://david-dm.org/browserslist/browserslist-useragent-regexp.svg
[deps-url]: https://david-dm.org/browserslist/browserslist-useragent-regexp
[build]: https://img.shields.io/github/workflow/status/browserslist/browserslist-useragent-regexp/CI.svg
[build-url]: https://github.com/browserslist/browserslist-useragent-regexp/actions
[coverage]: https://img.shields.io/coveralls/browserslist/browserslist-useragent-regexp.svg
[coverage-url]: https://coveralls.io/r/browserslist/browserslist-useragent-regexp
[dependabot]: https://api.dependabot.com/badges/status?host=github&repo=browserslist/browserslist-useragent-regexp
[dependabot-url]: https://dependabot.com/
[documentation]: https://img.shields.io/badge/API-Documentation-2b7489.svg
[documentation-url]: https://browserslist.github.io/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:
`json`
{
"scripts": {
"supportedBrowsers": "browserslist-useragent-regexp --allowHigherVersions -o supportedBrowsers.js"
}
}supportedBrowsers.ts
or for typescript.
3) Run this script, to compile RegExp:
`bash`
npm run supportedBrowsersor
yarn supportedBrowsers
supportedBrowsers.js:
`js`
module.exports = /((CPU[ +]OS|iPhone[ +]OS|CPU[ +]iPhone|CPU IPhone OS)[ +]+(11_\.|12_\.)(?:[_\.]\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:
`js
const {SupportedBrowsers} = require('./supportedBrowsers');
if (SupportedBrowsers.test(navigator.userAgent)) {
alert('Your browser is supported.');
}
`
for ts
`ts`
import {SupportedBrowsers} from './supportedBrowsers';
`bash`
npm i -D browserslist-useragent-regexpor
yarn add -D browserslist-useragent-regexp
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).
`bash`
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 |false
| ‑‑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. | |
Module exposes two main methods:
Compile browserslist query to RegExps for each browser.
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. |string
| env | | — | When multiple browserslist environments are specified, pick the config belonging to this environment. |boolean
| ignorePatch | | true | Ignore differences in patch browser numbers. |boolean
| ignoreMinor | | false | Ignore differences in minor browser versions. |boolean
| allowHigherVersions | | 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. |boolean
| allowZeroSubversions | | false | Ignore match of patch or patch and minor, if they are 0. |
#### RegExp info object
| Property | Type | Description |
|----------|------|-------------|
| family | string | Browser family. |[number, number, number][]
| requestVersions | | Versions provided by browserslist. |RegExp
| regExp | | RegExp to match useragent with family and versions. |RegExp
| sourceRegExp | | Original useragent RegExp, without versions. |[number, number, number] \| null
| resultFixedVersion | | Useragent version of RegExp. |[number, number, number] \| null
| resultMinVersion | | Useragent min version of RegExp. |[number, number, number] \| null` | Useragent max version of RegExp. |
| resultMaxVersion |
- Supported browsers
- Notes
- When querying for modern browsers