npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

express-browsersupport

v1.3.5

Published

A way to define which browsers are supported in your express app

Downloads

84

Readme

Express BrowserSupport

A way to define which browsers are supported in your express app

npm node dependencies Build Status Coverage Status

Functionalities

  • Check if browsers visiting your express app are supported by you.
  • Redirect old browsers to a fallback page.

Setup

Install the Express BrowserSupport package:

npm install express-browsersupport

Require the Express BrowserSupport package somewhere in your code:

const browsersupport = require('express-browsersupport');

Usage

The Express BrowserSupport package contains three modes. The let us redirect them mode, the send a custom response to them mode and the do it yourself mode.

Start by just setting up a basic express server:

const express = require('express');
const app = express();

Redirect

By specifying the redirectUrl param in the options we will redirect browsers who arn't supported to another url

app.use(browsersupport({
    redirectUrl: "/oldbrowser",
    supportedBrowsers: [
        "Chrome >= 52",
        "Firefox >= 47",
        "Safari >= 10",
        "Edge == All",
        "IE == 11"
    ]
}));
 
app.get('/', (req, res) => {
    // Supported browsers will endup in your own defined Express Routes
    res.send("Home");
});
 
app.get('/oldbrowser', (req, res) => {
    // Everything else here!
    res.send("Go away!");
});

Custom Response

By specifying the customResponse param in the options we will send your custom HTML response to browsers who arn't supported

// Non supported browsers will get this as a response (A custom HTML page)
const oldBrowserResponse = `
    <html>
        <head>
            <title>Old Browser</title>
        </head>
        <body>
            <h2><strong>Go away!</strong></h2>
        </body>
    </html>
`;
 
app.use(browsersupport({
    customResponse: oldBrowserResponse,
    supportedBrowsers: [
        "Chrome >= 52",
        "Firefox >= 47",
        "Safari >= 10",
        "Edge == All",
        "IE == 11"
    ]
}));
 
app.get('/', (req, res) => {
    // Supported browsers will endup in your own defined Express Routes
    res.send("Home");
});

Do it yourself

If you don't specify the customResponse or redirectUrl in your options you will have to do it yourself

Your req variable will always contain a special browserSupported boolean

This variable is always available! Even if you specify a customResponse or redirectUrl in your options

This means you are free to do what ever you want

app.use(browsersupport({
    supportedBrowsers: [
        "Chrome >= 52",
        "Firefox >= 47",
        "Safari >= 10",
        "Edge == All",
        "IE == 11"
    ]
}));
 
app.get('/', (req, res) => {
    console.log(req.supportedBrowser); // Return's true / false
    res.send("Home!");
});

Supported Browsers

This array can be filled with strings that will contain the browser checks.

So the order is "Browser Name" "Operator" "Version"

The following operators are supported: > >= ==

Instead of a version number you can also use All this means all versions from that browser are supported

This array is required and needs to have at least one rule

Strict Mode

By default when a browser visits that isn't defined in the supported browsers array

We will allow this. But sometimes you don't want to also disallow these browsers

Warning!!! This also disallows bot's trying to visit the URL

When set to true and someone with an undefined browser visits the app the browser will not be allowed

app.use(browsersupport({
    useStrictMode: true // Defaults to false
}));

Debug

Found a weird new browser and want to check what express-useragent returns. Sure just set debug to true:

app.use(browsersupport({
    debug: true // Defaults to false
}));

Bonus

Since we are using express-useragent to determent the current browser.

We also add this to your express setup. So no need to require this. Just do:

app.get('/', (req, res) => {
    console.log(req.useragent);
    res.send("Home");
});

License

MIT