@ad2302/browserslist-useragent-regexp v3.1.2

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]

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

RegExp info object

Other

• Supported browsers
• Notes
• When querying for modern browsers