Recently I had to build a simple banner in a React app that informed users if they use an outdated browser, such as Internet Explorer 11. Initially, I thought that this task would be rather simple, but surprisingly it took me quite a bit to figure out the best solution (for this case). Let’s have a look at how I solved it.
- The banner should only display when a user visits the app using an outdated browser.
- The banner should point users to a website that informs them about their browser situation. I went with this little site.
- The company I work for has a spreadsheet with supported and unsupported browsers and their versions, so this had to be matched in the code. For example, Chrome 61 is classified as outdated, whereas Chrome 62 is (still) fine.
- I wanted to have a simple API that gets me the name of the browser and its current version.
While casually looking through StackOverflow for some ideas, I stumbled upon this thread. The accepted answer from Dhanil looked promising to me, so I decided to give it a try and (literally) wrap it up.
Again, the below snippet is not mine, it’s from a guy called Dhanil on StackOverflow. Credit to him for providing this handy piece of code.
The above script basically gets the user agent string and applies some tests using regular expressions to figure out the name of the browser and its version. If you have ever worked with user agents, you might know what kind of pain you’re dealing with, so it surprised me quite a bit how well this script works.
However, I decided that I wanted a global class that would provide me with a convenient API, like
isIE(). Here’s the result:
- Note that in the constructor, I provide an object with all the browsers and their versions without support. If the browser version is higher than that number, it’s supported, lower or equal means it’s not. Of course, you could retrieve this information from an endpoint or a JSON inside your project, but in my case, it’s just fine as is.
- The method
_detectBrowser()is meant to be a private method and is only called once in the constructor, populating the
- You now have access to a public API by calling the methods, such as
isSupported(). You could include this class in whatever part of your application and make decisions based on it.
If you want to see an actual example of how you could use the above script in a React app, you might want to have a look at this snippet:
You can see one functional component called
TopBanner and the main class component called
App includes the
TopBanner and gives it a prop called
open, which can either be true or false. In the
App component, we make use of a lifecycle method called
componentDidMount , which is called each time the component is mounted into the DOM. If that’s the case, it will run our little browser detector script and set the local state, therefore toggling the
TopBanner component I’ve just put a single conditional that checks whether
open is set to true or false. In the second case, nothing gets rendered into the DOM, as if the component doesn’t exist. Otherwise, we display the message which could be extended by a close button and some styling.
With the above code, it’s pretty easy and reliable to detect browsers and their versions. You might want to use an already existing library (like this one), but I for myself prefer to not add more dependencies than absolutely necessary.
Final note: Please don’t make the same error as other, (major) web applications do and lock out users based on what kind of browser they use. Use feature detection rather than browser detection if possible, because locking out all Edge users just because Edge doesn’t support one API you use is not a good move. If a certain browser is missing a feature you are using in your app, consider just deactivating the said feature, but leave the rest of the site accessible.
In my case, I don’t block any user because of their browser but just display a simple, informative message to them. If a user visits the app with IE9, well, he won’t get far anyway.Back