Before proceeding, it's important to note that the approach mentioned may not be ideal. Browsers update frequently and users may not always have the ability to keep up with these updates due to various reasons such as company policies. A more effective method would involve using feature detection, where you verify if a specific feature is supported by the browser. While this may require additional effort, it provides a solid rationale for informing users of unsupported browsers.
An alternative is utilizing the browserslist-useragent-regexp package to create a regular expression based on your browserslist configuration. This generated regex can then be written to a file for testing compatibility with navigator.userAgent. The repository for browserslist-useragent-regexp includes an example setup in its README file.
Additionally, one can consider employing the browserslist-useragent package which enables checking if a specified user-agent aligns with the browserslist configuration provided. However, further investigation may be necessary as it appears to cater primarily towards Node.js applications.
It is worth noting that some caution should be exercised when exploring options like obsolete-webpack-plugin, as it seems to be abandoned and relies on outdated dependencies. Alternatively, if already utilizing Webpack 4, this plugin can be employed with HtmlWebpackPlugin to automatically insert HTML snippets into the page when a browser is deemed incompatible.