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

Provide webdesigners a unified way to tell the user that they need a newer browser to use this website in all its beauty.
Improve the security, comfort and overall experience of users by convincing them to update
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.

Content Security Policy support

As of version XX.XX.XX, browser-update supports nonce-based Content Security Policies (CSP). Supply a nonce value in the configuration option to automatically include it in your scripts:

{
    required: {
        f:-3,
        o:-3
    },
    nonce:'4Yt32UEYkdZ/J8FKu7z0jA=='
}

As a result, the nonce is now included in all script tags the library adds to the DOM:

<script src="https://example.com/update.show.min.js" nonce="4Yt32UEYkdZ/J8FKu7z0jA==">

Read more about Content Security Policies from MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP

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
Content Security Policy (CSP) support with nonce configuration option

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.

alehuo / browser-update