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.

possible duplicate https://stackoverflow.com/questions/49328382/browser-detection-in-reactjs — c-chavez, Oct 10 '18 at 11:08

score 26 · Accepted Answer · answered Nov 05 '18 at 07:18

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.

It shows an error message "My message" but after 2 min it loads the application.. — Saravana priyan S, Mar 25 '19 at 11:23
@SaravanapriyanS I think you should customize `isSupported` function for your particular website. — Islam Murtazaev, Nov 07 '19 at 14:37
This did not want to work for me in IE11. The script kept failing quietly. I finally tracked it down to the `document.write(
My message
)` part - IE11 will bomb out on this line unless you wrap the HTML in quotes. Otherwise worked like a charm - thanks much! — SmartyP, Apr 28 '20 at 17:52

score 8 · Answer 2 · answered Jun 18 '20 at 18:21

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>

score 6 · Answer 3 · answered Oct 10 '18 at 09:12

6

You have detect browser package on npm that may help you

answered Oct 10 '18 at 09:12

Petar Popovic

575
6
20

score 2 · Answer 4 · edited Nov 07 '19 at 12:14

Well what you can do is, you have to check the browser version, like in my case I was dealing with the Internet Explorer Version older than 11. So detect the browser. There is no need to add an extra package, just few lines of code and then make two ReactDOm.renders, one for Success/Supported and the other for Unsupported Version.

Here is how I did it, maybe that will help you:

// get the Version of Browser, older than '11'
const getIEVersion = () => {
  const ua = window.navigator.userAgent;
  const msie = ua.indexOf('MSIE ');
  if (msie > 0) {
    // IE 10 or older => return version number
    return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
  }
  const trident = ua.indexOf('Trident/');
  if (trident > 0) {
    // IE 11 => return version number
    const rv = ua.indexOf('rv:');
    return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
  }
  const edge = ua.indexOf('Edge/');
  if (edge > 0) {
    // Edge (IE 12+) => return version number
    return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
  }
  // other browser
  return false;
};

// Method for Rendering of Unsupported Version
const UnsupportedBrowserPage = () => (
  <div>
    <p>Test Page For Versions lower then 11 on IE</p>
  </div>
);


const iEVersion = getIEVersion();

if (iEVersion && iEVersion < 11) {

ReactDOM.render(<UnsupportedBrowserPage />, document.getElementById('root'));

} else {
  ReactDOM.render(
    <SupportedApp />, document.getElementById('root')
  );
}

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

4 Answers4

public/index.html

My message

Linked