How to check current browser against the list of supported ones

Question

We have a list of browsers we test our webapp in. I have a task to notify the user if his browser isn't supported or tested to work well with our app.

We have a browserslist configuration in the project and I'm looking for a way to test current browser against the list. I tried browserlist-useragent but we can't compile it with webpack due to the fact it uses net, fs, tls and other native node modules we don't want to include in our bundle.

Is there any better way do avoid copying the list of supported browsers in many different places and just use browserlist configuration that already exists to detect if user uses supported one or not?

Answer 1

I'd consider using this "utility" package https://github.com/browserslist/browserslist-useragent-regexp in the project that uses browserslist, and then use the file generated by the script suggested by this package to then use anywhere else. In reality, all you want is the regex in the generated file. This can be placed in any client or server code you need for browser detection. I've placed mine in some classic asp.

Also note that on a Windows PC, the instructions provided don't result in a file containing a RegEx. Instead, you'd need to run npx browserslist-useragent-regexp --allowHigherVersions to display a suitable RegEx on your console, and then add that where needed.