outdated-browser-pro

v1.0.0

Published

4 years ago

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

0High
0Medium
0Low

kokatsuna

outdated outdated-browser upgrade old browser

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

JS

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.

CSS

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

HTML

<div id="outdated"></div>

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.

In your template

In <head>, before any other script tags:

<script src="/js/dist/oldbrowser.js"></script>

In `oldbrowser.js`

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
})

In your gulpfile

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme