Can I render warning message if user's browser is not supported?

Question

I am working on a react application and customers want it to show a special message if user's old browser does not support (e.g. IE 9).

So long I tried to detect some "popular" old browsers, using react-device-detect package.

src/index.js

import { browserName, browserVersion } from "react-device-detect";

const render = Component => {
  if (browserName === "IE" && browserVersion < 10) {
    ReactDOM.render(<UnsupportedBrowser />, document.getElementById("root"));
  } else {
    ReactDOM.render(
      <AppContainer>
        <Component store={store} history={history} />
      </AppContainer>,
      document.getElementById("root")
    );
  }
};

And putting conditional comments:

public/index.html

<!--[if lte IE 9]>
  Please upgrade your browser
<![endif]-->

But I have a suspicion, that there are better ways of doing it, which I could not find searching the web.

Answer 1

I found a lot of JS scripts to detect user's browser name and version, so I had to mix them to get exactly what I want

public/index.html

<script type="text/javascript">
    function get_browser() {
      var ua = navigator.userAgent, tem, M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
      if (/trident/i.test(M[1])) {
        tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
        return { name: 'IE', version: (tem[1] || '') };
      }
      if (M[1] === 'Chrome') {
        tem = ua.match(/\bOPR\/(\d+)/)
        if (tem != null) { return { name: 'Opera', version: tem[1] }; }
      }
      if (window.navigator.userAgent.indexOf("Edge") > -1) {
        tem = ua.match(/\Edge\/(\d+)/)
        if (tem != null) { return { name: 'Edge', version: tem[1] }; }      
      }
      M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
      if ((tem = ua.match(/version\/(\d+)/i)) != null) { M.splice(1, 1, tem[1]); }
      return {
        name: M[0],
        version: +M[1]
      };
    }

    var browser = get_browser()
    var isSupported = isSupported(browser);

    function isSupported(browser) {
      var supported = false;
      if (browser.name === "Chrome" && browser.version >= 48) {
        supported = true;
      } else if ((browser.name === "MSIE" || browser.name === "IE") && browser.version >= 10) {
        supported = true;
      } else if (browser.name === "Edge") {
        supported = true;
      }
      return supported;
    }

    if (!isSupported) {
      document.write(<h1>My message</h1>)
    }
  </script>

This script allows users to proceed if their browser is chrome >= 48 or ie >= 10 or any version of edge. Otherwise it shows a special message asking user to update or change his browser.

You can also customize this script to your needs, modifying isSupported() function.

Answer 2

I think the best and most user-friendly alternative is to redirect the user to an exclusive ie.html page, where you can show instructions about how to download other browsers and just care about all IE stuff in that page only.

This way you don't need to do anything with React, just add the lines below to your index.html:

<script type="application/javascript">
    if (/MSIE|Trident/.test(window.navigator.userAgent)) window.location.href = '/ie.html';
</script>