Outdated Browser PRO

Detects outdated browsers and advises users to upgrade to a new version. Handles mobile devices. And callback!

This is a fork of Burocratik's excellent Outdated Browser, adding a number of new features.

Usage

$3

var outdatedBrowserPro = require("outdated-browser-pro");

outdatedBrowserPro();

If you like, specify options, eg:

outdatedBrowserPro({
browserSupport: {
'Chrome': 37, // Includes Chrome for mobile devices
'IE': 10,
'Safari': 7,
'Mobile Safari': 7,
'Firefox': 32
}
}, function(status) { // callback });

See below for more options.

Browsers that are __older__ than the versions supplied will see a message, depending on their platform:

- On desktop browsers, users will be directed to outdatedbrowser.com
- on iOS devices, users will be asked to visit the Settings app and upgrade their OS.
- On Android devices, users will be directed to Chrome in Google Play.

It's tested all the way from IE11 to IE6.

This module does not need jQuery.

#### Options

- __browserSupport__:Object - A matrix of browsers and their major versions - see above for demo. Anything less will be unsupported.
- __requiredCssProperty__:String - A CSS property that must be supported.
- __requireChromeOnAndroid__:Boolean - Ask Android users to install Chrome.

$3

@import "vendor/outdated-browser-pro.css";

$3

Integration Tips

We normally concatenate and combine different JS files using npm and browserify, but it's best to bundle this particular package by itself, since other scripts may expect things like console and function.bind() to exist and won't work on old browsers - if you bundle this with other software, and an old browser tried to use the bundle, the JS will probably fail before outdated-browser has a chance to do any work.

$3

In , before any other script tags:

$3

Start outdated-browser-pro and call it with your preferred options:

var outdatedBrowserFork = require("outdated-browser-pro");

outdatedBrowserFork({
browserSupport: {
'Chrome': 37,
'IE': 13,
'Safari': 7,
'Mobile Safari': 7,
'Firefox': 32
},
requireChromeOnAndroid: true
}, function(status) {
// callback
})

$3

Add the following underneath your existing js task:

gulp
.src('./public/js/src/oldbrowser.js')
.pipe(browserify({
debug : ! gulp.env.production
}))
.pipe(gulp.dest('./public/js/dist'))

Doing this will mean that dist/oldbrowser.js will only include outdated-browser-pro and its dependency user-agent-parser,without anything else to get in the way.

Differences from Outdated Browser 1.0.0

- Add explicit browser support via the __browserSupport__ option
- Add callback with browser out of date status
- Add mobile support. Users on iOS and Android will be directed to the Apple App Store and Google Play respectively.
- Add new __requireChromeOnAndroid__ option
- Be an NPM module
- No AJAX, languages are only 8K and removing the AJAX library has made the code substantially shorter.

And some code fixes:

- Pass jshint
- Remove HTML entities. It's 2015, we have unicode now.
- Included Vanilla JS onload option - that way you can keep using jQuery 2 and not have to revert to 1.x just to show messages to old browsers.
- Simplify some variable and function names

There's still some TODOs from the original code:

- Try and eliminate IDs (they're JS globals, so EUW)
- Re-do Farsi (RTL) support from original Outdated Browser

Author

This pro is made by Vladimir Ivanov.
The original Outdated Browser is made with love at Bürocratik