1 | # browserslist-useragent-regexp
|
2 |
|
3 | [![NPM version][npm]][npm-url]
|
4 | [![Node version][node]][node-url]
|
5 | [![Dependencies status][deps]][deps-url]
|
6 | [![Build status][build]][build-url]
|
7 | [![Coverage status][coverage]][coverage-url]
|
8 | [![Documentation badge][documentation]][documentation-url]
|
9 |
|
10 | [npm]: https://img.shields.io/npm/v/browserslist-useragent-regexp.svg
|
11 | [npm-url]: https://npmjs.com/package/browserslist-useragent-regexp
|
12 |
|
13 | [node]: https://img.shields.io/node/v/browserslist-useragent-regexp.svg
|
14 | [node-url]: https://nodejs.org
|
15 |
|
16 | [deps]: https://img.shields.io/librariesio/release/npm/browserslist-useragent-regexp
|
17 | [deps-url]: https://libraries.io/npm/browserslist-useragent-regexp/tree
|
18 |
|
19 | [build]: https://img.shields.io/github/actions/workflow/status/browserslist/browserslist-useragent-regexp/ci.yml?branch=master
|
20 | [build-url]: https://github.com/browserslist/browserslist-useragent-regexp/actions
|
21 |
|
22 | [coverage]: https://img.shields.io/codecov/c/github/browserslist/browserslist-useragent-regexp.svg
|
23 | [coverage-url]: https://app.codecov.io/gh/browserslist/browserslist-useragent-regexp
|
24 |
|
25 | [documentation]: https://img.shields.io/badge/API-Documentation-2b7489.svg
|
26 | [documentation-url]: https://browserslist.github.io/browserslist-useragent-regexp
|
27 |
|
28 | A utility to compile [browserslist query](https://github.com/browserslist/browserslist#queries) to a regex to test browser useragent. Simplest example: you can detect supported browsers on client-side.
|
29 |
|
30 | 1) Create `.browserslistrc` config, for example like this:
|
31 |
|
32 | ```
|
33 | last 2 versions
|
34 | not dead
|
35 | ```
|
36 |
|
37 | 2) Add script to `package.json`:
|
38 |
|
39 | ```json
|
40 | {
|
41 | "scripts": {
|
42 | "supportedBrowsers": "echo \"export default $(browserslist-useragent-regexp --allowHigherVersions);\" > supportedBrowsers.js"
|
43 | }
|
44 | }
|
45 | ```
|
46 |
|
47 | <details>
|
48 | <summary>for Windows users</summary>
|
49 |
|
50 | ```json
|
51 | {
|
52 | "scripts": {
|
53 | "supportedBrowsers": "(echo export default && browserslist-useragent-regexp --allowHigherVersions) > supportedBrowsers.js"
|
54 | }
|
55 | }
|
56 | ```
|
57 |
|
58 | </details>
|
59 |
|
60 | 3) Run this script, to compile regex:
|
61 |
|
62 | ```bash
|
63 | pnpm supportedBrowsers
|
64 | # or
|
65 | npm run supportedBrowsers
|
66 | # or
|
67 | yarn supportedBrowsers
|
68 | ```
|
69 |
|
70 | `supportedBrowsers.js`:
|
71 |
|
72 | ```js
|
73 | export default /Edge?\/(10[5-9]|1[1-9]\d|[2-9]\d\d|\d{4,})(\.\d+|)(\.\d+|)|Firefox\/(10[4-9]|1[1-9]\d|[2-9]\d\d|\d{4,})\.\d+(\.\d+|)|Chrom(ium|e)\/(10[5-9]|1[1-9]\d|[2-9]\d\d|\d{4,})\.\d+(\.\d+|)|Maci.* Version\/(15\.([6-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})\.\d+)([,.]\d+|)( Mobile\/\w+|) Safari\/|Chrome.+OPR\/(9\d|\d{3,})\.\d+\.\d+|(CPU[ +]OS|iPhone[ +]OS|CPU[ +]iPhone|CPU IPhone OS|CPU iPad OS)[ +]+(15[._]([6-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})[._]\d+)([._]\d+|)|Opera Mini|Android:?[ /\-](10[6-9]|1[1-9]\d|[2-9]\d{2}|\d{4,})(\.\d+|)(\.\d+|)|Mobile Safari.+OPR\/(6[4-9]|[7-9]\d|\d{3,})\.\d+\.\d+|Android.+Firefox\/(10[5-9]|1[1-9]\d|[2-9]\d\d|\d{4,})\.\d+(\.\d+|)|Android.+Chrom(ium|e)\/(10[6-9]|1[1-9]\d|[2-9]\d\d|\d{4,})\.\d+(\.\d+|)|Android.+(UC? ?Browser|UCWEB|U3)[ /]?(13\.([4-9]|\d{2,})|(1[4-9]|[2-9]\d|\d{3,})\.\d+)\.\d+|SamsungBrowser\/(1[7-9]|[2-9]\d|\d{3,})\.\d+|Android.+MQQBrowser\/(13(\.([1-9]|\d{2,})|)|(1[4-9]|[2-9]\d|\d{3,})(\.\d+|))(\.\d+|)|K[Aa][Ii]OS\/(2\.([5-9]|\d{2,})|([3-9]|\d{2,})\.\d+)(\.\d+|)/;
|
74 | ```
|
75 |
|
76 | 4) Import regex from created file:
|
77 |
|
78 | ```js
|
79 | import supportedBrowsers from './supportedBrowsers.js';
|
80 |
|
81 | if (supportedBrowsers.test(navigator.userAgent)) {
|
82 | alert('Your browser is supported.');
|
83 | }
|
84 | ```
|
85 |
|
86 | ## Install
|
87 |
|
88 | ```bash
|
89 | pnpm add -D browserslist-useragent-regexp
|
90 | # or
|
91 | npm i -D browserslist-useragent-regexp
|
92 | # or
|
93 | yarn add -D browserslist-useragent-regexp
|
94 | ```
|
95 |
|
96 | ## Why?
|
97 |
|
98 | As was written in article ["Smart Bundling: Shipping legacy code to only legacy browsers"](https://www.smashingmagazine.com/2018/10/smart-bundling-legacy-code-browsers/): you can determinate, which bundle you should give to browser from server with [`browserslist-useragent`](https://github.com/browserslist/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.
|
99 |
|
100 | Development was inspired by [this proposal from Mathias Bynens](https://twitter.com/mathias/status/1105857829393653761).
|
101 |
|
102 | How to make differential resource loading and other optimizations with `browserslist-useragent-regexp` you can read in article ["Speed up with Browserslist"](https://dev.to/dangreen/speed-up-with-browserslist-30lh).
|
103 |
|
104 | [Demo](https://browserslist.github.io/browserslist-useragent-regexp/demo.html) ([sources](https://github.com/browserslist/browserslist-useragent-regexp/blob/7cf6afb7da2b6c77179abb8b8bd1bbcb61cf376a/docs/demo.html#L17-L29), [build script](https://github.com/browserslist/browserslist-useragent-regexp/blob/7cf6afb7da2b6c77179abb8b8bd1bbcb61cf376a/examples/buildDemo.js#L61-L74)).
|
105 |
|
106 | Also, testing useragents using generated regex [is faster](https://gist.github.com/dangreen/55c41072d8891efd3a772a4739d6cd9d) than using the `matchesUA` method from browserslist-useragent.
|
107 |
|
108 | ## CLI
|
109 |
|
110 | ```bash
|
111 | pnpm browserslist-useragent-regexp [query] [...options]
|
112 | # or
|
113 | npx browserslist-useragent-regexp [query] [...options]
|
114 | # or
|
115 | yarn exec -- browserslist-useragent-regexp [query] [...options]
|
116 | ```
|
117 |
|
118 | Also, short alias is available:
|
119 |
|
120 | ```bash
|
121 | pnpm bluare [query] [...options]
|
122 | ```
|
123 |
|
124 | | Option | Description | Default |
|
125 | |--------|-------------|---------|
|
126 | | query | Manually provide a browserslist query. Specifying this overrides the browserslist configuration specified in your project. | |
|
127 | | ‑‑help, -h | Print this message. | |
|
128 | | ‑‑verbose, -v | Print additional info about regexes. | |
|
129 | | ‑‑ignorePatch | Ignore differences in patch browser numbers. | `true` |
|
130 | | ‑‑ignoreMinor | Ignore differences in minor browser versions. | `false` |
|
131 | | ‑‑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` |
|
132 | | ‑‑allowZeroSubversions | Ignore match of patch or patch and minor, if they are 0. | `false` |
|
133 |
|
134 | ## JS API basics
|
135 |
|
136 | Module exposes two main methods:
|
137 |
|
138 | ### [getUserAgentRegexes(options)](https://browserslist.github.io/browserslist-useragent-regexp/functions/getUserAgentRegexes.html)
|
139 |
|
140 | Compile browserslist query to [regexes for each browser](#regex-info-object).
|
141 |
|
142 | ### [getUserAgentRegex(options)](https://browserslist.github.io/browserslist-useragent-regexp/functions/getUserAgentRegex.html)
|
143 |
|
144 | Compile browserslist query to one regex.
|
145 |
|
146 | > [Description of all methods you can find in Documentation.](https://browserslist.github.io/browserslist-useragent-regexp/index.html)
|
147 |
|
148 | #### Options
|
149 |
|
150 | | Option | Type | Default | Description |
|
151 | |--------|------|---------|-------------|
|
152 | | browsers | `string \| string[]` | — | Manually provide a browserslist query (or an array of queries). Specifying this overrides the browserslist configuration specified in your project. |
|
153 | | ignorePatch | `boolean` | `true` | Ignore differences in patch browser numbers. |
|
154 | | ignoreMinor | `boolean` | `false` | Ignore differences in minor browser versions. |
|
155 | | 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. |
|
156 | | allowZeroSubversions | `boolean` | `false` | Ignore match of patch or patch and minor, if they are 0. |
|
157 |
|
158 | Any of the [`browserslist` API options](https://github.com/browserslist/browserslist#js-api) may also be provided.
|
159 |
|
160 | #### Regex info object
|
161 |
|
162 | | Property | Type | Description |
|
163 | |----------|------|-------------|
|
164 | | family | `string` | Browser family. |
|
165 | | requestVersions | `[number, number, number][]` | Versions provided by browserslist. |
|
166 | | regex | `RegExp` | Regex to match useragent with family and versions. |
|
167 | | sourceRegex | `RegExp` | Original useragent regex, without versions. |
|
168 | | version | `[number, number, number] \| null` | Useragent version of regex. |
|
169 | | minVersion | `[number, number, number] \| null` | Useragent min version of regex. |
|
170 | | maxVersion | `[number, number, number] \| null` | Useragent max version of regex. |
|
171 |
|
172 | ## Other
|
173 |
|
174 | - [Supported browsers](https://github.com/browserslist/browserslist-useragent#supported-browsers)
|
175 | - [Notes](https://github.com/browserslist/browserslist-useragent#notes)
|
176 | - [When querying for modern browsers](https://github.com/browserslist/browserslist-useragent#when-querying-for-modern-browsers)
|