Skip to content

Commit

Permalink
add message if browser is not supported (#325)
Browse files Browse the repository at this point in the history
  • Loading branch information
@DanielHabenicht
DanielHabenicht authored Nov 1, 2020
1 parent 40c650f commit 4f84256
Show file tree
Hide file tree
Showing 5 changed files with 126 additions and 39 deletions.
3 changes: 3 additions & 0 deletions .browserslistrc
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
defaults
not IE 11
not IE_Mob 11
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@
"babel-loader": "^8.1.0",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"brfs": "^2.0.2",
"browserslist-useragent-regexp": "^2.1.1",
"clean-webpack-plugin": "^3.0.0",
"commander": "^5.0.0",
"copy-webpack-plugin": "^5.1.1",
Expand Down
64 changes: 52 additions & 12 deletions src/index.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,38 +24,78 @@

<link rel="apple-touch-icon" sizes="192x192" href="/images/icons/icon-192x192.png">
<script>
setTimeout(() => {
const slowCaption = document.getElementById('slow-connection-caption')
const timer = setTimeout(function () {
const slowCaption = document.getElementById("slow-connection-caption");
if (slowCaption) {
slowCaption.style.opacity = 1;
}
}, 2500)
}, 2500);
setTimeout(function () {
// Use Timer as the Element we want to find is not rendered yet
let supportedBrowsers = <%= htmlWebpackPlugin.options.variables.browserlistRegExp %>
if (!supportedBrowsers.test(navigator.userAgent)) {
const notSupportedCaption = document.getElementById("no-compatible-browser");
clearTimeout(timer);
if (notSupportedCaption) {
notSupportedCaption.style.opacity = 1;
}
}
}, 10);
</script>
<style>
body {
margin: 0;
}
@font-face {
font-family: 'Dosis';
font-family: "Dosis";
font-weight: 600;
src: url('/Dosis-SemiBold.ttf') format('truetype');
src: url("/Dosis-SemiBold.ttf") format("truetype");
}
@font-face {
font-family: 'Dosis';
font-family: "Dosis";
font-weight: 300;
src: url('/Dosis-Light.ttf') format('truetype');
src: url("/Dosis-Light.ttf") format("truetype");
}
</style>
</head>
<body>
<div id="app">
<div style="display: flex; justify-content: center; align-items: center; height: 100vh; flex-direction: column; background-color: #E3E9F3;">
<img src="<%= htmlWebpackPlugin.options.variables.logoSrc %>" alt="<%= htmlWebpackPlugin.options.title %>" style="height: 5rem;">
<div id="slow-connection-caption" style="opacity: 0; margin-top: 1rem; font-family: Dosis, sans-serif; color: #002E62;">Lade Daten - das kann einen Moment dauern.</div>
<noscript style="display: flex; justify-content: center; align-items: center; flex-direction: column;">
<div id="noscript-caption" style="font-family: Dosis, sans-serif; font-weight: 600; color: #FEAE00;">CovMap funktioniert nicht ohne Javascript.</div>
<div
style="
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-direction: column;
background-color: #e3e9f3;
"
>
<img
src="<%= htmlWebpackPlugin.options.variables.logoSrc %>"
alt="<%= htmlWebpackPlugin.options.title %>"
style="height: 5rem"
/>
<div
id="slow-connection-caption"
style="opacity: 0; margin-top: 1rem; font-family: Dosis, sans-serif; color: #002e62"
>
Lade Daten - das kann einen Moment dauern.
</div>
<div
id="no-compatible-browser"
style="opacity: 0; margin-top: 1rem; font-family: Dosis, sans-serif; color: red"
>
Dieser Browser wird nicht unterstützt, bitte nutze einen anderen (z.B.
<a target="_blank" rel="noopener" href="https://www.google.com/chrome/">Chrome</a>,
<a target="_blank" rel="noopener" href="https://www.microsoft.com/edge">Edge</a>,
<a target="_blank" rel="noopener" href="https://www.mozilla.org/firefox/">Firefox</a>).
</div>
<noscript style="display: flex; justify-content: center; align-items: center; flex-direction: column">
<div id="noscript-caption" style="font-family: Dosis, sans-serif; font-weight: 600; color: #feae00">
CovMap funktioniert nicht ohne Javascript.
</div>
</noscript>
</div>
</div>
Expand Down
11 changes: 9 additions & 2 deletions webpack.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ const MomentLocalesPlugin = require("moment-locales-webpack-plugin");

const APP_CONFIG_PATH = process.env.APP_CONFIG_PATH || path.resolve(__dirname, "apps/official");
const buildConfig = require(path.resolve(APP_CONFIG_PATH, "build.json"));
const browserlistRegExp = require("browserslist-useragent-regexp");

const babelLoader = {
loader: "babel-loader",
Expand Down Expand Up @@ -147,7 +148,10 @@ module.exports = function (env) {
url: buildConfig.meta.url,
description: buildConfig.meta.description,
keywords: buildConfig.meta.keywords,
variables: buildConfig,
variables: {
...buildConfig,
browserlistRegExp: browserlistRegExp.getUserAgentRegExp({ allowHigherVersions: true }),
},
minify:
env == "prod"
? {
Expand All @@ -171,7 +175,10 @@ module.exports = function (env) {
url: buildConfig.meta.url,
description: buildConfig.meta.description,
keywords: buildConfig.meta.keywords,
variables: buildConfig,
variables: {
...buildConfig,
browserlistRegExp: browserlistRegExp.getUserAgentRegExp({ allowHigherVersions: true }),
},
minify:
env == "prod"
? {
Expand Down
86 changes: 61 additions & 25 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -908,6 +908,14 @@
"@babel/plugin-transform-react-jsx-source" "^7.12.1"
"@babel/plugin-transform-react-pure-annotations" "^7.12.1"

"@babel/runtime-corejs3@^7.9.6":
version "7.12.1"
resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.12.1.tgz#51b9092befbeeed938335a109dbe0df51451e9dc"
integrity sha512-umhPIcMrlBZ2aTWlWjUseW9LjQKxi1dpFlQS8DzsxB//5K+u6GLTC/JliPKHsd5kJVPIU6X/Hy0YvWOYPcMxBw==
dependencies:
core-js-pure "^3.0.0"
regenerator-runtime "^0.13.4"

"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
version "7.12.1"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.1.tgz#b4116a6b6711d010b2dad3b7b6e43bf1b9954740"
Expand Down Expand Up @@ -2141,7 +2149,7 @@
resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.0.tgz#69a23a3ad29caf0097f06eda59b361ee2f0639f6"
integrity sha1-aaI6OtKcrwCX8G7aWbNh7i8GOfY=

"@types/node@*", "@types/node@>= 8":
"@types/node@*", "@types/node@>= 8", "@types/node@^14.0.4":
version "14.14.6"
resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.6.tgz#146d3da57b3c636cc0d1769396ce1cfa8991147f"
integrity sha512-6QlRuqsQ/Ox/aJEQWBEJG7A9+u7oSYl3mem/K8IzxXG/kAGbV1YPD9Bg9Zw3vyxC/YP+zONKwy8hGkSt1jxFMw==
Expand Down Expand Up @@ -2276,19 +2284,7 @@
"@types/source-list-map" "*"
source-map "^0.7.3"

"@types/webpack@^4.4.31":
version "4.41.24"
resolved "https://registry.yarnpkg.com/@types/webpack/-/webpack-4.41.24.tgz#75b664abe3d5bcfe54e64313ca3b43e498550422"
integrity sha512-1A0MXPwZiMOD3DPMuOKUKcpkdPo8Lq33UGggZ7xio6wJ/jV1dAu5cXDrOfGDnldUroPIRLsr/DT43/GqOA4RFQ==
dependencies:
"@types/anymatch" "*"
"@types/node" "*"
"@types/tapable" "*"
"@types/uglify-js" "*"
"@types/webpack-sources" "*"
source-map "^0.6.0"

"@types/webpack@^4.41.8":
"@types/webpack@^4.4.31", "@types/webpack@^4.41.8":
version "4.41.24"
resolved "https://registry.yarnpkg.com/@types/webpack/-/webpack-4.41.24.tgz#75b664abe3d5bcfe54e64313ca3b43e498550422"
integrity sha512-1A0MXPwZiMOD3DPMuOKUKcpkdPo8Lq33UGggZ7xio6wJ/jV1dAu5cXDrOfGDnldUroPIRLsr/DT43/GqOA4RFQ==
Expand Down Expand Up @@ -2831,6 +2827,11 @@ argparse@^1.0.7:
dependencies:
sprintf-js "~1.0.2"

argue-cli@^1.2.0:
version "1.2.1"
resolved "https://registry.yarnpkg.com/argue-cli/-/argue-cli-1.2.1.tgz#27b2304f86370642ad2dcbb69f00fd728215073f"
integrity sha512-Em3HDMlqiVLNOgXUCYz5NG1mx/44aijsxUOO8elmfvAN4/3ar1S3WPTua7WGhsMbeQm8clOwpDZ09sN7C2FnOg==

argv-formatter@~1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/argv-formatter/-/argv-formatter-1.0.0.tgz#a0ca0cbc29a5b73e836eebe1cbf6c5e0e4eb82f9"
Expand Down Expand Up @@ -4180,6 +4181,19 @@ browserify-zlib@^0.2.0:
dependencies:
pako "~1.0.5"

browserslist-useragent-regexp@^2.1.1:
version "2.1.1"
resolved "https://registry.yarnpkg.com/browserslist-useragent-regexp/-/browserslist-useragent-regexp-2.1.1.tgz#e29de5b4ac136d9b00151883a56707b2d84fe163"
integrity sha512-y3SipmlZ7sTNnmu6Xw05oNBuUnCJIhyxOpDpB7Q7Twgi2Iyi+cWbK47blkmLVjAFcLOUMYjEsEFNhWTes4T8Ug==
dependencies:
"@babel/runtime-corejs3" "^7.9.6"
"@types/node" "^14.0.4"
argue-cli "^1.2.0"
browserslist "^4.5.6"
chalk "^4.0.0"
easy-table "^1.1.1"
useragent "^2.3.0"

browserslist@^3.2.6:
version "3.2.8"
resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-3.2.8.tgz#b0005361d6471f0f5952797a76fc985f1f978fc6"
Expand All @@ -4188,7 +4202,7 @@ browserslist@^3.2.6:
caniuse-lite "^1.0.30000844"
electron-to-chromium "^1.3.47"

browserslist@^4.12.0, browserslist@^4.8.5:
browserslist@^4.12.0, browserslist@^4.5.6, browserslist@^4.8.5:
version "4.14.5"
resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.14.5.tgz#1c751461a102ddc60e40993639b709be7f2c4015"
integrity sha512-Z+vsCZIvCBvqLoYkBFTwEYH3v5MCQbsAjp50ERycpOjnPmolg1Gjy4+KaWWpm8QOJt9GHkhdqAl14NpCX73CWA==
Expand Down Expand Up @@ -5178,6 +5192,11 @@ core-js-compat@^3.6.2:
browserslist "^4.8.5"
semver "7.0.0"

core-js-pure@^3.0.0:
version "3.6.5"
resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.6.5.tgz#c79e75f5e38dbc85a662d91eea52b8256d53b813"
integrity sha512-lacdXOimsiD0QyNf9BC/mxivNJ/ybBGJXQFKzRekp1WTHoVUWsUHEn+2T8GJAzzIhyOuXA+gOxCVN3l+5PLPUA==

core-js@^1.0.0:
version "1.2.7"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
Expand Down Expand Up @@ -6066,6 +6085,15 @@ earcut@^2.2.2:
resolved "https://registry.yarnpkg.com/earcut/-/earcut-2.2.2.tgz#41b0bc35f63e0fe80da7cddff28511e7e2e80d11"
integrity sha512-eZoZPPJcUHnfRZ0PjLvx2qBordSiO8ofC3vt+qACLM95u+4DovnbYNpQtJh0DNsWj8RnxrQytD4WA8gj5cRIaQ==

easy-table@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/easy-table/-/easy-table-1.1.1.tgz#c1b9b9ad68a017091a1c235e4bcba277540e143f"
integrity sha512-C9Lvm0WFcn2RgxbMnTbXZenMIWcBtkzMr+dWqq/JsVoGFSVUVlPqeOa5LP5kM0I3zoOazFpckOEb2/0LDFfToQ==
dependencies:
ansi-regex "^3.0.0"
optionalDependencies:
wcwidth ">=1.0.1"

ecc-jsbn@~0.1.1:
version "0.1.2"
resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
Expand Down Expand Up @@ -10025,7 +10053,7 @@ lodash.without@~4.4.0:
resolved "https://registry.yarnpkg.com/lodash.without/-/lodash.without-4.4.0.tgz#3cd4574a00b67bae373a94b748772640507b7aac"
integrity sha1-PNRXSgC2e643OpS3SHcmQFB7eqw=

"[email protected] || ^4.16.1", lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.8.0, lodash@~4.17.2, lodash@~4.17.4:
"[email protected] || ^4.16.1", lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.8.0, lodash@~4.17.2, lodash@~4.17.4:
version "4.17.20"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
Expand Down Expand Up @@ -10083,7 +10111,7 @@ [email protected]:
resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-2.6.3.tgz#51ccd0b4fc0c843587d7a5709ce4d3b7629bedc5"
integrity sha1-UczQtPwMhDWH16VwnOTTt2Kb7cU=

lru-cache@^4.0.1:
lru-cache@4.1.x, lru-cache@^4.0.1:
version "4.1.5"
resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
integrity sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==
Expand Down Expand Up @@ -14690,20 +14718,20 @@ [email protected]:
dependencies:
os-tmpdir "~1.0.1"

[email protected], tmp@^0.0.33:
version "0.0.33"
resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
integrity sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==
dependencies:
os-tmpdir "~1.0.2"

[email protected]:
version "0.1.0"
resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.1.0.tgz#ee434a4e22543082e294ba6201dcc6eafefa2877"
integrity sha512-J7Z2K08jbGcdA1kkQpJSqLF6T0tdQqpR2pnSUXsIchbPdTI9v3e85cLW0d6WDhwuAleOV71j2xWs8qMPfK7nKw==
dependencies:
rimraf "^2.6.3"

tmp@^0.0.33:
version "0.0.33"
resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
integrity sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==
dependencies:
os-tmpdir "~1.0.2"

[email protected]:
version "1.0.4"
resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.4.tgz#23640dd7b42d00433911140820e5cf440e521dd1"
Expand Down Expand Up @@ -15185,6 +15213,14 @@ use@^3.1.0:
resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==

useragent@^2.3.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/useragent/-/useragent-2.3.0.tgz#217f943ad540cb2128658ab23fc960f6a88c9972"
integrity sha512-4AoH4pxuSvHCjqLO04sU6U/uE65BYza8l/KKBS0b0hnUPWi+cQ2BpeTEwejCSx9SPV5/U03nniDTrWx5NrmKdw==
dependencies:
lru-cache "4.1.x"
tmp "0.0.x"

utf8-byte-length@^1.0.1:
version "1.0.4"
resolved "https://registry.yarnpkg.com/utf8-byte-length/-/utf8-byte-length-1.0.4.tgz#f45f150c4c66eee968186505ab93fcbb8ad6bf61"
Expand Down Expand Up @@ -15383,7 +15419,7 @@ wbuf@^1.1.0, wbuf@^1.7.3:
dependencies:
minimalistic-assert "^1.0.0"

wcwidth@^1.0.0:
wcwidth@>=1.0.1, wcwidth@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8"
integrity sha1-8LDc+RW8X/FSivrbLA4XtTLaL+g=
Expand Down

0 comments on commit 4f84256

Please sign in to comment.