To help you get started, we've collected the most common ways that browser-update is being used within popular public projects.

bcgov / gwells / app / frontend / src / common / helpers / browserUpdate.js View on Github

import browserUpdate from 'browser-update'

const config = {
  required: { e: -4, f: -3, o: -3, s: -1, c: -3 },
  insecure: true,
  unsupported: true,
  reminder: 0,
  reminderClosed: 1.1,
  no_permanent_hide: true,
  noclose: true,
  shift_page_down: false,
  api: 2010.01,
  text: '<strong>The Groundwater Wells and Aquifers application will not work correctly on ({brow_name}).</strong><br>We recommend Chrome, Firefox or Safari.<br>Update browser'
}

browserUpdate(config)

View more ways to use browser-update

browser-update

Many internet users are still using very old, out-dated browsers – most of them for no actual reason. We want to remind these unobtrusively to update their browser.

Goals

1. Provide webdesigners a unified way to tell the user that they need a newer browser to use this website in all its beauty.
2. Improve the security, comfort and overall experience of users by convincing them to update
3. But: do not annoy or lock out users

How to use

Go to browser-update.org, choose the browsers you want to be notified and embed the code into your website.

Or use the npm package:

npm usage

Install it using npm:

npm install browser-update --save

And load it (using browserify, webpack or similar):

var browserUpdate = require('browser-update');
browserUpdate({ [configuration-options] })

If you want to include only the browser-detection script and the notification will be loaded from our cdn only if really an outdated browser is detected (to save some kilobytes), use this:

var browserUpdate = require('browser-update/update.npm.js');
browserUpdate({ [configuration-options] })

If you have an ES6 compatible build environment, you can of course use the import statement:

import browserUpdate from 'browser-update';

Options can be something like:

{
    required: {
        e:-2,
        i:11,
        f:-3,
        o:-3,
        s:10.1,
        c:"64.0.3282.16817",
        samsung: 7.0,
        vivaldi: 1.2
    },
    insecure:true
}

See the available options to see how you can customize it to your needs.

Features

• Unobtrusive
  • We take care not to erroneously notify users by constantly tweaking the detection code
  • users of small niche browsers and users who have no possibility to update are not notified
  • We do not block the users form using a website in any way
  • The website can be used without taking additional steps
  • The notification will only appear once a day by default
  • If the user actively closes the notification, it will reappear after a week
• Translated into > 30 languages
• Browser detection less than 3kb gzipped + rest gets only lazy loaded when an outdated browser was detected
• Giving users reasons why an up-to-date browser is important
• Only showing browsers that are actually available for the users device and operating system (Android, Windows Phone, Windows, MacOS, iOS).
• Only notify users that actually can update to a newer browser on their devices
• Hide notification from bots
• Well tested

More information, our motivation and the features can be found on our web site.

Translations

The page currently translated into more than 30 languages. If you want to improve the translations or translate into a new language please see our translation manual.

Cross-Browser-Testing

We are using the browserstack.com cross browser testing tool to make sure the notification and website is shown correctly on all kinds of browsers and devices.