@appnest/upgrade-browser
A simple customizable HTML file to show to users that should upgrade their browser
Last updated 2 years ago by explore .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @appnest/upgrade-browser 
SYNC missed versions from official npm registry.

Upgrade Browser

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

Current Tags

  • 0.0.8                                ...           latest (2 years ago)

5 Versions

  • 0.0.8                                ...           2 years ago
  • 0.0.7                                ...           2 years ago
  • 0.0.6                                ...           2 years ago
  • 0.0.5                                ...           2 years ago
  • 0.0.4                                ...           2 years ago
Maintainers (2)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 1
Last Month 2
Dependencies (0)
None
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |