Customizable Browser Update Prompt Dialog – badbrowser.js

badbrowser.js is a JavaScript library that detects the outdated browser and displays a custom dialog popup to prompt the users to update their browser.

Installation:

$ npm install @dvhb/badbrowser –save

How to use it:

Load the stylesheet ‘badbrowser.css’ and JavaScript file ‘badbrowser.js’ in the document.

<link href="badbrowser.css" rel="stylesheet">
<script src="badbrowser.js"></script>

Create the browser update prompt dialog.

<h1>You are using an outdated browser</h1>
<h3 class="badbrowser-user-browser"></h3>
<p>You can continue browsing, but proper work is not guaranteed</p>
<p>Follow one of this links to update your browser</p>
<p> <a class="oldbrowser__browserLink" title="Download Google Chrome" style="background-position: 0px 0px;"
       href="https://www.google.com/chrome/" target="_blank"></a> <a class="oldbrowser__browserLink" title="Download Mozilla Firefox" style="background-position: -60px 0px;"
       href="https://www.mozilla.org/ru/firefox/new/" target="_blank"></a> <a class="oldbrowser__browserLink" title="Download Opera" style="background-position: -120px 0px;"
       href="http://www.opera.com/download" target="_blank"></a> <a class="oldbrowser__browserLink" title="Download Safari" style="background-position: -180px 0px;"
       href="https://www.apple.com/safari/" target="_blank"></a> <a class="oldbrowser__browserLink" title="Download Internet Explorer" style="background-position: -240px 0px;"
       href="https://www.microsoft.com/ie/" target="_blank"></a> </p>
<a href="javascript:;" class="badbrowser-close">Close</a>

Create a new badbrowser instance and override the default settings as per your needs.

badbrowser.init({
  // path to your html alerts
  // could be a function:
  // function (ua) {
  //   return '/alerts/' + lang + '.html'
  // }
  path: '/alerts/en.html',
  // if `false` then user's choice will be saved in the cookies
  // and alert window will not be showen next time
  ignoreChoice: false,
  // Min version of browser that will be supported
  supported: {
    msedge: '12',
    firefox: '37',
    chrome: '41',
    opera: '28',
    safari: '8',
    yandexbrowser: '15',
    safari_mobile: '7',
    android: '4',
    chrome_mobile: '41',
    msie_mobile: '11'
  }
  
})

Changelog:

11/09/2018

• Added chromium in default supported browsers

07/02/2018

• Fix error of undefined user agent