Web: Client: Scripts: Added browserDetector.js
This commit is contained in:
parent
9d88b1caba
commit
ff3e302ff7
@ -69,6 +69,7 @@
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
<script src="/static/scripts/browserDetector.js"></script>
|
||||
<script>
|
||||
console.log("It's WEB CLIENT INIT");
|
||||
fetch("/static/scripts/config.json")
|
||||
|
3
packages/client/src/bootstrap.js
vendored
3
packages/client/src/bootstrap.js
vendored
@ -2,7 +2,8 @@ import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import App from "./App";
|
||||
//import { registerSW } from "@docspace/common/sw/helper";
|
||||
const root = document.getElementById("root");
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById("root"));
|
||||
if (root) ReactDOM.render(<App />, root);
|
||||
|
||||
//registerSW();
|
||||
|
123
public/scripts/browserDetector.js
Normal file
123
public/scripts/browserDetector.js
Normal file
@ -0,0 +1,123 @@
|
||||
(function () {
|
||||
class BrowserDetector {
|
||||
constructor() {
|
||||
this.browser = {};
|
||||
this.unsupportedBrowsers = {
|
||||
Chrome: 107,
|
||||
Firefox: 107,
|
||||
IE: 11,
|
||||
Edge: 107,
|
||||
Opera: 93,
|
||||
Safari: 13,
|
||||
};
|
||||
|
||||
this.detectBrowser();
|
||||
}
|
||||
|
||||
detectBrowser() {
|
||||
this.browser = (function () {
|
||||
const agent = navigator.userAgent;
|
||||
let temp = [];
|
||||
let match =
|
||||
agent.match(
|
||||
/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i
|
||||
) || [];
|
||||
|
||||
if (/trident/i.test(match[1])) {
|
||||
temp = /\brv[ :]+(\d+)/g.exec(ua) || [];
|
||||
return { name: "IE", version: temp[1] || "" };
|
||||
}
|
||||
|
||||
if (match[1] === "Chrome") {
|
||||
temp = agent.match(/\b(OPR|Edge)\/(\d+)/);
|
||||
if (temp != null) {
|
||||
return { name: temp[1].replace("OPR", "Opera"), version: temp[2] };
|
||||
}
|
||||
}
|
||||
|
||||
match = match[2]
|
||||
? [match[1], match[2]]
|
||||
: [navigator.appName, navigator.appVersion, "-?"];
|
||||
|
||||
if ((temp = agent.match(/version\/(\d+)/i)) != null) {
|
||||
match.splice(1, 1, temp[1]);
|
||||
}
|
||||
|
||||
return { name: match[0], version: match[1] };
|
||||
})();
|
||||
}
|
||||
|
||||
isSupported() {
|
||||
console.log(this.browser);
|
||||
if (this.unsupportedBrowsers.hasOwnProperty(this.browser.name)) {
|
||||
if (
|
||||
+this.browser.version > this.unsupportedBrowsers[this.browser.name]
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
if (window.hasOwnProperty("AscDesktopEditor")) {
|
||||
return true; //TODO: remove if desktop editors update cef
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
const isSupported = new BrowserDetector().isSupported();
|
||||
|
||||
if (!isSupported) {
|
||||
const styles = `<style>
|
||||
*, *::after, *::before {box-sizing: border-box;}
|
||||
html { font-size: 16px; }
|
||||
body { background: #F6F8F9; width: 100%; height: 100%; position: fixed; display: table; text-align: center; padding: 0px; margin: 0px; min-width: 320px; }
|
||||
.wrapper { display: table-cell; vertical-align: middle; height: 350px; width: 100%; max-width: 520px; text-align: center; padding: 10px;}
|
||||
h1 {font-weight: bold; font-size: 1.5rem; line-height: 2rem; padding: 0px; margin: 20px auto;}
|
||||
p {font-size: 1.125rem; line-height: 1.5rem; padding-bottom: 40px; color: #8797A1;}
|
||||
button {border: 1px solid #199CF3; border-radius: 4px; display: block; height: 50px; font-size: 1rem; padding: 15px; margin: 0 auto 50px; color: #199cf3; background-color: transparent; cursor: pointer;}
|
||||
span {display: block; font-size: 0.875rem; line-height: 1.5rem; text-align: center; color: #8797A1;}
|
||||
.old-list { list-style: none; display: block; margin: 0 auto; width: 100%; max-width: 640px; padding: 0; font-size: 0;}
|
||||
.old-item { display: inline-block; width: 25%; text-align: center;}
|
||||
.old-link { display: block; text-align: center; text-decoration: none; width: 100%; height: 100%; padding-top: 10px; padding-bottom: 10px; transition: 0.3s all ease; }
|
||||
.old-link:hover { background: rgba(25, 156, 243, 0.1); border-radius: 6px;}
|
||||
.old-title { margin-top: 20px; color: #199cf3; font-size: 1.125rem; }
|
||||
@media screen and (max-width: 600px) { .br-item { width: 50%; margin-bottom: 40px; } }
|
||||
</style>`;
|
||||
|
||||
const body = `<div class="wrapper">
|
||||
<h1>Browser needs to be updated</h1>
|
||||
<p>You are using an outdated browser version</p>
|
||||
<ul class="old-list">
|
||||
<li class="old-item">
|
||||
<a href="https://www.google.com/chrome/" class="old-link">
|
||||
<img src="/static/images/browsers/chrome.svg" class="old-img" alt="Chrome">
|
||||
<span class="old-title">Chrome</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="old-item">
|
||||
<a href="https://www.mozilla.org/firefox/new/" class="old-link">
|
||||
<img src="/static/images/browsers/firefox.svg" class="old-img" alt="Firefox">
|
||||
<span class="old-title">Firefox</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="old-item">
|
||||
<a href="https://www.opera.com/" class="old-link">
|
||||
<img src="/static/images/browsers/opera.svg" class="old-img" alt="Opera">
|
||||
<span class="old-title">Opera</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="old-item">
|
||||
<a href="https://www.microsoft.com/edge/download" class="old-link">
|
||||
<img src="/static/images/browsers/edge.svg" class="old-img" alt="Edge">
|
||||
<span class="old-title">Edge</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>`;
|
||||
|
||||
document.head.innerHTML += styles;
|
||||
document.title = "You are using an outdated browser version";
|
||||
document.body.innerHTML = body;
|
||||
}
|
||||
})();
|
Loading…
Reference in New Issue
Block a user