Outdated Browser Rework

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

This is a fork of Burocratik's Outdated Browser, adding a number of new features including:

Explicit browser version support
Mobile browser support
Edge support
Substantial size reduction
More translations
Custom upgrade messages
Unminified code
Removed adware (Burocratik sold their site to a VPN company)

And more (see below for the full list).

One of the challenges with making this type of module is that the JS and CSS can't use any current tech - the 'get a new browser' message must display on older browsers - so yes, this is hard. We have to use ES3, an ancient version of JavaScript. We can't even use the nice '×' close character (we have to use the letter 'x') since that character doesn't display on some older browsers! This module is tested all the way back to IE6.

This module does not need jQuery.

Demo

There's a demo page here where all browsers are unsupported - this allows you to see the effect! This file is index.html in the source.

Here's a demo you can edit on JSfiddle

Usage (with browserify)

JS

In your template

In <head>, before any other script tags:

<script src="https://github.com/mikemaccana/outdated-browser-rework/raw/master/js/dist/oldbrowser.js"></script>

In `oldbrowser.js`

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

var outdatedBrowserRework = require("outdated-browser-rework");
outdatedBrowserRework();

If you like, specify options, eg:

outdatedBrowserRework({
    browserSupport: {
        Chrome: 57, // Includes Chrome for mobile devices
        Edge: 39,
        Safari: 10,
        "Mobile Safari": 10,
        Firefox: 50,
        Opera: 50,
        Vivaldi: 1,
        // You could specify minor version too for those browsers that need it.
        Yandex: { major: 17, minor: 10 },
        // You could specify a version here if you still support IE in 2017.
        // You could also instead seriously consider what you're doing with your time and budget
        IE: false
    },
    requireChromeOnAndroid: false,
    isUnknownBrowserOK: false,
    messages: {
        en: {
            outOfDate: "Your browser is out of date!",
            unsupported: "Your browser is not supported!",
            update: {
                web: "Update your browser to view this website correctly. ",
                googlePlay: "Please install Chrome from Google Play",
                appStore: "Please update iOS from the Settings App"
            },
            // You can set the URL to null if you do not want a clickable link or provide
            // your own markup in the `update.web` message.
            url: "http://browser-update.org/",
            callToAction: "Update my browser now",
            close: "Close"
        }
    }
});

The particular versions used in this example are the defaults, by the way!

See below for more options.

Browsers that are older than the versions supplied, or who use a browser where support is false, will see a message, depending on their platform:

On desktop browsers, users will be directed to browser-update.org/
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.

Usage (without browserify)

In your template

In <head>, before any other script tags:

<script src="https://github.com/mikemaccana/outdated-browser-rework/raw/master/js/dist/outdated-browser-rework.min.js"></script>
<script>
    outdatedBrowserRework();
</script>

See above for the default options.

Options

browserSupport: Object - A matrix of browsers and their versions - see above for demo. Anything less will be unsupported. false means all versions are unsupported.
requiredCssProperty: String - A CSS property that must be supported.
messages: Object - Customize upgrade messages for your purposes. See the above default options for an example.
language: String - A language string to be used for the messages in the notification. Default is en. See languages.json for supported languages. Can be used instead of messages if preferred.
requireChromeOnAndroid: Boolean - Ask Android users to install Chrome. Default is false.
isUnknownBrowserOK: Boolean. Whether unknown browsers are considered to be out of date or not. The default is false, ie. unknown browsers are considered to be out of date. Consider setting true and using requiredCssProperty to catch missing features.

SCSS

If you're using sass-npm you can just import the npm module, and it will load index.scss:

@import "outdated-browser-rework.scss";

Otherwise compile the sass and put it somewhere. Then load that via a link tag inside <head>:

<link rel="stylesheet" href="https://github.com/mikemaccana/outdated-browser-rework/blob/master/css/outdated-browser.css" />

HTML

Add the required HTML at the end of your document:

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

Yes, IDs suck but old browsers don't support getting elements by class name.

You should also always use HTML <!DOCTYPE> declaration to tell legacy browsers that you're using full standards mode. Without this it's possible that your page gets loaded in the quirks mode and it will not work with this package.
For more information, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode

Bundling the JavaScript

In modern times we normally concatenate and combine different JS modules using browserify or webpack: it's best to bundle outdated-browser-rework by itself. Since other scripts may expect things like console and function.bind() to exist, they won't work on old browsers - if you bundle this with other software, the JS will probably fail before outdated-browser has a chance to do any work.

For gulp users

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-rework and its dependency user-agent-parser, without anything else to get in the way.

For Webpack users

First of all, to bundle outdated-browser-rework by itself, create a new entry point in your webpack config file. You'll also need to install style-loader and css-loader in order to import the package's CSS. Your webpack configuration should look something like this:

const path = require("path");

module.exports = {
    entry: {
        main: path.join(__dirname, "src/index.js"),
        "outdated-browser-rework": path.join(
            __dirname,
            "src/outdated-browser-rework.js"
        )
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"]
            }
        ]
    }
};

Secondly, make use of outdated-browser-rework in src/outdated-browser-rework.js:

import outdatedBrowser from "outdated-browser-rework";
import "outdated-browser-rework/dist/style.css";

outdatedBrowser();

Finally, add the generated JS file in your HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Webpack example</title>
    </head>
    <body>
        <div id="outdated"></div>
        <script src="https://github.com/mikemaccana/outdated-browser-rework/raw/master/outdated-browser-rework.js"></script>
        <script src="https://github.com/mikemaccana/outdated-browser-rework/raw/master/main.js"></script>
    </body>
</html>