This repository contains a simple upgrade-browser.html you can show to your visitors if their browser is not supported. The buttons and download links for the following browsers will be shown: "chrome", "edge", "firefox", "opera", "safari".

Example 1

👍 How to use

I recommend that you do some feature checking before showing the page. Here's an example of what you could do if you only wanted to supported browsers with support for CSS grids and custom elements.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Upgrade Browser (demo)</title>
</head>
<body>

<p>Only show this if CSS grids and custom elements are supported.</p>

<script type="text/javascript">
  (function () {
    var supportsGrid = ("grid-column" in document.documentElement.style || "msGridColumn" in document.documentElement.style);
    var supportsCustomElements = ("customElements" in window);
    var supported = supportsCustomElements && supportsGrid;

    // Show the upgrade-browser dialog if the browser is not supported
    if (!supported) {
      window.location = "upgrade-browser.html?nofirefox&noopera";
    }
  })();
</script>
</body>
</html>

As seen in the above code at window.location = "upgrade-browser.html?nofirefox&noopera";, the URL of the upgrade-browser.html file may contain a query that specifies which browsers that should not be recommended to the users. You are able to specify the following fragments in the query.

"nochrome"
"noedge"
"nofirefox"
"noopera"
"nosafari"

You are also able to specify a title, a subtitle and a backgroundColor as a hex without the #.

...
window.location = "upgrade-browser.html?title=No Support&subtitle=Our app does not support your browser. Please install another&backgroundColor=000000";
...

Here's how that would look.

Example 2

🎉 License

MIT license

Keywords

FAQs

What is @appnest/upgrade-browser?

Is @appnest/upgrade-browser popular?

Is @appnest/upgrade-browser well maintained?

Package last updated on 17 Apr 2018

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@appnest/upgrade-browser

Upgrade Browser

👍 How to use

🎉 License

Keywords

Related posts

Malicious “express-dompurify” npm Package Steals Browser and Cryptocurrency Wallet Data

ENISA 2024 Threat Landscape Report Warns of Increasing State-Sponsored Supply Chain Attacks on Open Source Software