Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/andreasbm/upgrade-browser
A simple customizable HTML file to show users that should upgrade their browser.
https://github.com/andreasbm/upgrade-browser
Last synced: 18 days ago
JSON representation
A simple customizable HTML file to show users that should upgrade their browser.
- Host: GitHub
- URL: https://github.com/andreasbm/upgrade-browser
- Owner: andreasbm
- License: mit
- Created: 2018-04-16T09:17:53.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-04-17T16:36:44.000Z (over 6 years ago)
- Last Synced: 2024-10-05T08:38:15.065Z (30 days ago)
- Language: HTML
- Size: 367 KB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: license.txt
Awesome Lists containing this project
- jimsghstars - andreasbm/upgrade-browser - A simple customizable HTML file to show users that should upgrade their browser. (HTML)
README
# 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`.
## 👍 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`.
```html
Upgrade Browser (demo)
Only show this if CSS grids and custom elements are supported.
(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";
}
})();
```
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 `#`.
```javascript
...
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.
## 🎉 License
MIT license