JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 150277
  • Score
    100M100P100Q187829F
  • License MIT

A utility to compile browserslist query to a RegExp to test browser useragent.

Package Exports

  • browserslist-useragent-regexp

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (browserslist-useragent-regexp) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

browserslist-useragent-regexp

NPM version Node version Dependencies status Build status Coverage status Dependabot badge Documentation badge

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
  1. 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"
  }
}
  1. 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)/;
  1. 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.

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
‑‑allowZeroSubverions 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.
allowZeroSubverions 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