In my Vue.js app, I have the following in package.json

  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]

I believe this is used by Babel to customise the JavaScript that is generated (other build tools may also use it). Is it possible for me to leverage this list of supported browsers to show an error if the user attempts to load the app in an unsupported browser?

I could write some JavaScript that detects the user agent and shows an error if the browser is not supported, but this would likely require me to maintain the list of supported browsers in 2 places, which I'd rather avoid.

In my Vue.js app, I have the following in package.json

  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]

I believe this is used by Babel to customise the JavaScript that is generated (other build tools may also use it). Is it possible for me to leverage this list of supported browsers to show an error if the user attempts to load the app in an unsupported browser?

I could write some JavaScript that detects the user agent and shows an error if the browser is not supported, but this would likely require me to maintain the list of supported browsers in 2 places, which I'd rather avoid.

• javascript
• vue.js
• browser

1 Answer 1

First and foremost I want to mention that it might be a bad idea to do this. Browsers are update at quite a fast pace and users might not be able to update often due to for example some pany policy. A better approach would be to use feature detection, where you check if a specific feature is supported by the browser. This might be a bit more work, but gives an actual reason to tell people that their browser is not supported.

You can use the browserslist-useragent-regexp package to generate a regular expression from your browserslist configuration. You can write this regular expression to a file and use it to test if navigator.userAgent is supported by your configuration. The README file in the browserslist-useragent-regexp repository contains an example setup.

Another options is to use the browserslist-useragent package, you can give this tool a user-agent and a browserslist configuration to check if a specific user-agent matches the browserslist configuration. This option might need some more research as it seems to be aimed first at Node.js applications.

This option seems to be abandoned and has some dependencies which are no longer maintained, so proceed at your own risk. obsolete-webpack-plugin can also be used which requires less setup if you're already using Webpack 4 in your project. It can be used with HtmlWebpackPlugin and it creates a new chunk which will insert an HTML snippet in your page when a browser is not supported.