@medmain/ensure-browser

ensure-browser package

A simple script to be included in Medmain web applications, to ensure that the browser is supported.

If the browser is not supported, an error message is displayed and the React application is not rendered.

How to use it

Step 1

In index.html:

• Include a <script> tag to load it from a CDN
• Call ensureBrowser(browsers) function to specify the supported browsers.

<script
  crossorigin
  src="https://unpkg.com/@medmain/ensure-browser@0.1.0/dist/browser/ensure-browser.js"
></script>
<script>
  window.IS_SUPPORTED_BROWSER = window.ensureBrowser([
    {name: 'firefox', version: '10'},
    {name: 'chrome', version: '20'}
  ]);
</script>

Optional: in addition of the name property, specify a displayName to customize the way the supported browsers are displayed in the error message.

Step 2

In src/index.js, don't render the application if the browser is not supported.

if (window.IS_SUPPORTED_BROWSER === false) {
  throw new Error('Your browser is not supported!');
}

(async () => {
  let element;
  try {
    await app.initialize();
    element = (
      <BaseRoot app={app}>
        <Root />
      </BaseRoot>
    );
  } catch (err) {
    console.error(err);
    element = renderError(err);
  }

  ReactDOM.render(element, document.getElementById('main'));
})();

Available browser names

The name property of the supported browsers can be one of the following values:

• chrome
• chrome mobile
• electron
• firefox
• firefox for ios
• ie
• microsoft edge
• phantomjs
• safari
• seamonkey
• silk
• opera mini
• opera

This list was extracted from Platform.js v1.3.5 code. All names were converted to lower case.