From 975eed85640780560ba95919159089561ff6d3df Mon Sep 17 00:00:00 2001 From: Paul Fitzpatrick Date: Wed, 5 Jan 2022 16:09:37 -0500 Subject: [PATCH] (core) fix browser check and favicon in grist-core Summary: A check for old browsers and a Grist favicon were not available in grist-core, leaving harmless but distracting errors in logs. This adds them. Test Plan: checked manually Reviewers: georgegevoian Reviewed By: georgegevoian Subscribers: jarek Differential Revision: https://phab.getgrist.com/D3207 --- .gitignore | 1 + app/client/browserCheck.ts | 57 ++++++++++++++++++++++++++++++++++++ buildtools/webpack.check.js | 11 +++++++ package.json | 2 +- static/app.html | 2 +- static/custom-widget.html | 2 +- static/error.html | 2 +- static/icons/favicon.png | Bin 0 -> 15365 bytes 8 files changed, 73 insertions(+), 4 deletions(-) create mode 100644 app/client/browserCheck.ts create mode 100644 buildtools/webpack.check.js create mode 100644 static/icons/favicon.png diff --git a/.gitignore b/.gitignore index f19c6dcb..b8fb846e 100644 --- a/.gitignore +++ b/.gitignore @@ -3,6 +3,7 @@ /static/*.bundle.js /static/*.bundle.js.map /static/bundle.css +/static/browser-check.js # Build helper files. /.build* diff --git a/app/client/browserCheck.ts b/app/client/browserCheck.ts new file mode 100644 index 00000000..e2fd6aac --- /dev/null +++ b/app/client/browserCheck.ts @@ -0,0 +1,57 @@ +/** + * Check if browser is a version we are happy with. + * Introduce any new dependencies very carefully, checking that the code still runs + * on old browsers afterwards. + */ + +// Use version of bowser with polyfill for old browsers. +import * as bowser from 'bowser/bundled'; + +// This code will run in the browser. +const version = bowser.getParser(window.navigator.userAgent); +(window as any)._parsedBrowserVersion = version; + +// Skip if user has already dismissed a warning from us. +if (document && window && document.cookie.indexOf("gristbrowser=accept") === -1) { + const isHappyBrowser = version.satisfies({ + desktop: { + chrome: ">=72.0.3626", // first 2019 version + firefox: ">=65", // first 2019 version + safari: ">=12.0.3", // first 2019 version + edge: ">=80", // one of first Chromium-based Edge versions, early 2020 + opera: ">=66", // first 2020 version + } + }); + const isMobile = version.isPlatform('mobile') || version.isPlatform('tablet'); + if (!isHappyBrowser) { + const problemElement = document.getElementById('browser-check-problem'); + const dismissElement = document.getElementById('browser-check-problem-dismiss'); + if (problemElement && dismissElement) { + // Prepare a button for dismissing the warning. + dismissElement.onclick = function() { + // Set a cookie so we don't show this warning once it is dismissed. + let cookie = "gristbrowser=accept; path=/"; + // Keep the cookie for a year (60*60*24*365 seconds) before warning again. + cookie += "; max-age=31536000"; + + // NOTE: Safari seems to limit cookies (and other storage?) set via JS to 1 week, so + // people on mobile or old Safari may get prompted more often than we'd like. See + // https://webkit.org/blog/10218/full-third-party-cookie-blocking-and-more/ + + if (document.location.href.indexOf(".getgrist.com") !== -1) { + // on *.getgrist.com, set cookie domain to getgrist.com + cookie += "; Domain=.getgrist.com"; + } + document.cookie = cookie; + // Hide the warning, showing the loaded page that it was obscuring. + problemElement.style.display = 'none'; + return false; + }; + // Show modal describing problem, and some possible solutions. + if (isMobile) { + problemElement.className += ' browser-check-is-mobile'; + } + problemElement.style.display = 'block'; + } + } +} diff --git a/buildtools/webpack.check.js b/buildtools/webpack.check.js new file mode 100644 index 00000000..9d029f3e --- /dev/null +++ b/buildtools/webpack.check.js @@ -0,0 +1,11 @@ +const path = require('path'); + +module.exports = { + target: 'web', + mode: 'production', + entry: "./_build/app/client/browserCheck.js", + output: { + path: path.resolve("./static"), + filename: "browser-check.js" + }, +}; diff --git a/package.json b/package.json index 40e5ad8b..256eefc9 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "scripts": { "start": "tsc --build -w --preserveWatchOutput & catw app/client/*.css app/client/*/*.css -o static/bundle.css -v & webpack --config buildtools/webpack.config.js --mode development --watch --hide-modules & NODE_PATH=_build:_build/stubs nodemon --delay 1 -w _build/app/server -w _build/app/common _build/stubs/app/server/server.js & wait", "install:python": "buildtools/prepare_python.sh", - "build:prod": "tsc --build && webpack --config buildtools/webpack.config.js --mode production && cat app/client/*.css app/client/*/*.css > static/bundle.css", + "build:prod": "tsc --build && webpack --config buildtools/webpack.config.js --mode production && webpack --config buildtools/webpack.check.js --mode production && cat app/client/*.css app/client/*/*.css > static/bundle.css", "start:prod": "NODE_PATH=_build:_build/stubs node _build/stubs/app/server/server.js", "test": "GRIST_SESSION_COOKIE=grist_test_cookie GRIST_TEST_LOGIN=1 TEST_SUPPORT_API_KEY=api_key_for_support NODE_PATH=_build:_build/stubs mocha _build/test/nbrowser/*.js", "test:smoke": "NODE_PATH=_build:_build/stubs mocha _build/test/nbrowser/Smoke.js", diff --git a/static/app.html b/static/app.html index 89f5032a..c62d76bf 100644 --- a/static/app.html +++ b/static/app.html @@ -5,7 +5,7 @@ - + diff --git a/static/custom-widget.html b/static/custom-widget.html index 0b00b690..9af2dfca 100644 --- a/static/custom-widget.html +++ b/static/custom-widget.html @@ -3,7 +3,7 @@ - + Custom widget