Browser support is a big problem for web developer. Especially when using some framework like React, Angular, or Vue. This article summarizes some information when I’m dealing with this problem on our React project.
This Article will Include:
1. browser support on React & Flexbox
2. notification for un-support browser
3. tool for cross-browser testing
—
# Define The Support Browsers on My React Project
Base on the official docs, we know React can support to IE9 with polyfill. But I also want to define the support version for other browsers like Chrome, Firefox, and Safari.
After googling, I found this issue which is closest what I need. Thus I decide the browser support for our project as below:
- Chrome 49 (release: 2016/3/2)
- Firefox 50 (release: 2016/11/15)
- Safari 10 (release: 2016/9/20)
- IE 9 (release: 2011/3/14)
- Edge 14 (release: 2016/2/18)
Because we also apply flexbox on our project, after check can i use, I change our support for IE to IE10.
- IE 10 (release: 2012/10/26)
*You might want to define browser support range base on your target customer. And check google analytics if your application is already launched.
*Try to limit the range as possible as you can. Although React can support all modern browser. But you might have to apply some library or syntax which might cause some error at the specific browser. So limit the range of browser support will save you lots of time.
# Notification for un-support browser
For the browser which not support by our application, we need to tell our user to upgrade their browser or download another one. So we have to
1. Check the User’s Browser:
There are lots of libraries to check the user’s browser, and my personal favorite is is.js. But I don’t need the whole package. So in order to reduce the size of my application, I just copy the regex base on what I need.
2. Redirect Un-support Browser:
For the browser which doesn’t support by React, we can’t render notification through React component. So I create a static page to check the user’s browser. Then redirect to our application or display the notification if their browser doesn’t in our white list.
3. Display Notification:
If the user is using macOS, display the information about IE and Edge is useless. And they might want to use their current browser. So always asking them to download Chrome/Firefox might not be a good solution either. So I need to generate notification base on what the browser they are using.
Here is an example created by CRA: git repo
# Online Testing Tool
Although we already do the browser check and display the notification, we still need to do some test in the different browsers. There are lots of online services can help us handle this problem more simple. I list some of them with the pricing as below:
- browsershots: Free
- TURBO.NET: +9/month
- LAMBDATEST: +15/month ; Free with 60 mins/month
- SAUCELABS: +19/month
- browserling: +19/month ; Free with limited 3 mins per session + Win 7 + IE 11
- CrossBrowserTesting: +29/month; Free Trial
- BrowserStack: +29/month; Free Trial; Free for Open Source
- endtest: +138/month ; Free with 3 Test Suites + Win 10 + Chrome
I haven’t tried all them yet, so below is my personal opinion:
- If you’re using macOS and only want to check IE, you can try chrome extension: IE Tab.
- If you only need the screenshot at the different browser, browsershots will be a good start. But it doesn’t support IE/edge, and Safari is only for version 9.1. Another choose will be this screenshot tool provided by Microsoft.
- If you need to test your application manually. You can try LAMBDATEST which have a freemium plan with 60 mins/month.
- If you want to test your application automatically, I personally love the UX of endtest. Unfortunately, the freemium plan only supports Chrome. And the price($138/month) might be a little expensive.
- For some target device which you have to manually test frequently. I still suggest buying actual hardware. Because it will be easier to debug with a real device in hand rather than using virtual machines.
# What’s Next:
In this article, we only display the notification for the browser we didn't support. But if you have to support some old browser for some reason, you might want to check this broadcast — SyntaxFM: old browsers part1 / part2 / part3
—
Thanks for reading this article, and hope it can provide some useful information for you. And feel free to leave your comment if you have any different idea on handling browser support.
# Reference
* browser release date: chrome / firefox / safari / IE / edge
* Google Chrome Older Versions Download
* user agent for all browser
* CSS hack for different browser
* compatibility table: es5 / es6
