check browers list #634

baurine · 2020-06-15T07:04:22Z

What did:

Show a simple prompt message, which suggests user update browser, in the top of the page if the browser is not compatible with the browserslist

Principle: browserslist-useragent-regexp is a utility to compile browserslist query to a RegExp to test browser useragent.

baurine · 2020-06-15T08:00:09Z

ui/public/checkBrowser.js

+    } else {
+      text =
+        'Your browser version is outdated, recommend to use the latest Chrome or Edge to get better experience.'
+    }


Do a simple i18n to avoid to use i18next library.

baurine · 2020-06-15T08:02:04Z

ui/public/diagnoseReport.html

@@ -10,6 +10,8 @@
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <script src="%PUBLIC_URL%/supportedBrowsers.js"></script>
+    <script src="%PUBLIC_URL%/checkBrowser.js"></script>


We can combine these 2 js together but that needs to use sed. As I know, the sed works differently between macOS and Linux.

ui/public/checkBrowser.js

ui/public/supportedBrowsers.js

breezewish · 2020-06-15T12:41:38Z

ui/public/checkBrowser.js

+        '您的浏览器版本已过期，推荐使用最新版本的 Chrome 或 Edge 浏览器以便获得更好的体验。'
+    } else {
+      text =
+        'Your browser version is outdated, recommend to use the latest Chrome or Edge to get better experience.'


Sometimes the page is simply broken, prefer to avoid the soft "recommend"

We also support Firefox

Ok, how about "latest modern browsers"?

Modern browser is a word for developers and users don't know what it means precisely. I prefer to explicitly list out our supported browsers

breezewish · 2020-06-15T12:45:24Z

ui/public/checkBrowser.js

+function checkBrowser() {
+  if (!window.__supported_browsers__.test(navigator.userAgent)) {
+    var text
+    if (navigator.language.indexOf('zh') === 0) {


IE6 ~ 10 even do not support NavigatorLanguage API, and I'm afraid it will be broken in such cases.

Let me do some test.

breezewish · 2020-06-15T12:46:44Z

ui/public/checkBrowser.js

+    }
+
+    const content =
+      '<div style="background: yellow; width: 100%; position: absolute; top: 0; z-index: 4; padding: 8px; text-align: center; transition: top 2s;">' +


Transition needs later browser support and may not work in old browsers (please verify whether it will break things)

So it just has no animation in the old browser, I guess, let me test it.

Cool, if it doesn't break things then it would be great

breezewish · 2020-06-15T12:47:43Z

ui/public/checkBrowser.js

+    var text
+    if (navigator.language.indexOf('zh') === 0) {
+      text =
+        '您的浏览器版本已过期，推荐使用最新版本的 Chrome 或 Edge 浏览器以便获得更好的体验。'


UTF8 characters might cause problems in some old browsers I guess, please test it against IE6

Really, just know it, 😂 Where can I find an IE6 now... anyway, I will try it, maybe I can test it in IE11 first. (ant design only support IE11 for IEs)

A note.. AFAIK TiDB Dashboard won't work on IE11 as well

IE6 has a wrong charset detecting strategy https://support.microsoft.com/zh-cn/help/928847/internet-explorer-uses-the-wrong-character-set-when-it-renders-an-html (Honestly I have no ideas how to solve it for now)

ui/public/diagnoseReport.html

breezewish · 2020-06-15T12:50:25Z

ui/public/checkBrowser.js

+    }
+
+    const content =
+      '<div style="background: yellow; width: 100%; position: absolute; top: 0; z-index: 4; padding: 8px; text-align: center; transition: top 2s;">' +


How about using red as the background to bring more attractions

I am ok with it, just found some examples which use the yellow background.

How about two policies:

For browsers that functionality will totally break, must not continue, asking user to change browser, like:

For browsers that functionality works (but maybe not perfect), display a soft recommendation.

Compared following colors (choose from ant design colors):

red:

ff4d4f:

yellow:

ffc53d:

fadb14:

Feel the last one makes me most comfortable.

How about two policies:

For browsers that functionality will totally break, must not continue, asking user to change browser, like:

For browsers that functionality works (but maybe not perfect), display a soft recommendation.

This would be better.

breezewish

Cool!

baurine · 2020-06-16T08:41:06Z

Updated logic:

If the browser is not supported by our pages definitely, we show the following static page to ask the user to update their browser. The list of the unsupported browsers is here: https://browserl.ist/?q=dead%2C+IE+11
If the browser is supported but the version is too old, show a prompt message box to ask the user to upgrade their browser to the latest version as demonstrated above.

baurine · 2020-06-16T08:42:19Z

ui/gulpfile.esm.js

+  shell.task(
+    'echo "window.__unsupported_browsers__ = $(browserslist-useragent-regexp "dead, IE 11" --allowHigherVersions)" > ./public/unSupportedBrowsers.js'
+  )
+)


The generated full list is here: https://browserl.ist/?q=dead%2C+IE+11

It won't work in some old Chrome versions as well. The list needs some tuning..

breezewish · 2020-06-16T10:30:16Z

ui/public/updateBrowser.html

+    <div id="root">
+      <h1 id="title">Please update your browser</h1>
+      <p id="desc">
+        Your browser isn't supported anymore. Update it to get the best TiDB


Notice that YouTube will display different messages when current browser is up-to-date while browsing the same page:

This avoid confusing when user switched the browser, and copy-paste the URL.

breezewish

The current implementation does not work well to meet the demand "For browsers that functionality will totally break, must not continue, asking user to change browser". It is still displaying soft recommendations. For example, we met a client that uses Chrome 5X. For such users, displaying a soft recommendation is not appropriate (and due to the soft color user might even not notified).

How about implementing a simple version first (I think you can open another PR)? The comprehensive implementation requires much more work to do compared to current PR, for example:

Need to test the minimal supported browser version, for example, Chrome 10 definitely won't work. In such case, only displaying a recommendation is not enough.
Need to check implementation against old browsers to see if the notification itself works. For example, IE6. Current implementation might even have problems in IE6 that cannot display the message correctly.
Need to check implementation against our public path prefix feature for those images and the new updateBrowser.html web page. Current code doesn't seem to be compatible with it..
Now this PR uses a simple redirection. It will cause misinformation after user switching to the required browser but copy-paste the URL again.

The simple version only needs to display an attractive & non-recommendation message when the current browser is not in our supported list. It's simply a wording change over your previous commits: recommend to use ... to get better experience --> Some features may not work. Please use Chrome > xxx, Firefox > xxx, Edge > xxx or .....

AndreMouche · 2020-06-22T09:04:26Z

/merge

ti-srebot · 2020-06-22T09:04:29Z

Sorry @AndreMouche, you don't have permission to trigger auto merge event on this branch. You are not a committer for the related sigs:Dashboard(slack).

baurine · 2020-06-22T09:28:54Z

I am working on another PR.

stale · 2020-08-21T14:54:03Z

Is this still relevant? If so, what is blocking it? Is there anything you can do to help move it forward?

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

wip

4286aa6

baurine marked this pull request as draft June 15, 2020 07:04

baurine added 5 commits June 15, 2020 15:13

wip

267863e

wip

a32ca77

wip

c998fef

wip

27053d1

wip

001b328

baurine commented Jun 15, 2020

View reviewed changes

baurine marked this pull request as ready for review June 15, 2020 08:07

baurine requested a review from breezewish June 15, 2020 08:09

baurine commented Jun 15, 2020

View reviewed changes

ui/public/checkBrowser.js Outdated Show resolved Hide resolved

baurine commented Jun 15, 2020

View reviewed changes

ui/public/checkBrowser.js Outdated Show resolved Hide resolved

not use new js grammars and functions

dfbf8ec

breezewish reviewed Jun 15, 2020

View reviewed changes

ui/public/supportedBrowsers.js Outdated Show resolved Hide resolved

breezewish reviewed Jun 15, 2020

View reviewed changes

ui/public/diagnoseReport.html Show resolved Hide resolved

breezewish reviewed Jun 15, 2020

View reviewed changes

baurine added 7 commits June 16, 2020 11:11

ignore supportedBrowsers.js

687a794

update wording

7fe9b7d

check browser language

ad08266

update background color

c112d60

Merge branch 'master' into check-browser-list

f88f6c1

wip

b58f552

wip

f0eee5a

baurine commented Jun 16, 2020

View reviewed changes

baurine added 3 commits June 16, 2020 17:08

wip

fd4727c

wip

deac701

wip

2d49396

breezewish reviewed Jun 16, 2020

View reviewed changes

Merge branch 'master' into check-browser-list

df7ad4f

breezewish added the status/WIP label Jun 22, 2020

baurine mentioned this pull request Jun 22, 2020

check browser compatibility simply #654

Merged

stale bot added the type/stale label Aug 21, 2020

stale bot closed this Aug 28, 2020

SabaPing deleted the check-browser-list branch April 3, 2023 01:28

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

check browers list #634

check browers list #634

baurine commented Jun 15, 2020 •

edited

Loading

baurine Jun 15, 2020

baurine Jun 15, 2020

breezewish Jun 15, 2020

breezewish Jun 15, 2020

baurine Jun 16, 2020

breezewish Jun 16, 2020

breezewish Jun 15, 2020

baurine Jun 16, 2020

breezewish Jun 15, 2020

baurine Jun 16, 2020

breezewish Jun 16, 2020

breezewish Jun 15, 2020

baurine Jun 16, 2020 •

edited

Loading

breezewish Jun 16, 2020

breezewish Jun 16, 2020 •

edited

Loading

breezewish Jun 15, 2020

baurine Jun 16, 2020 •

edited

Loading

breezewish Jun 16, 2020

baurine Jun 16, 2020

baurine Jun 16, 2020

breezewish left a comment

baurine commented Jun 16, 2020

baurine Jun 16, 2020

breezewish Jun 16, 2020

breezewish Jun 16, 2020

breezewish left a comment •

edited

Loading

AndreMouche commented Jun 22, 2020

ti-srebot commented Jun 22, 2020

baurine commented Jun 22, 2020

stale bot commented Aug 21, 2020

check browers list #634

check browers list #634

Conversation

baurine commented Jun 15, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

baurine Jun 16, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

breezewish Jun 16, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

baurine Jun 16, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

breezewish left a comment

Choose a reason for hiding this comment

baurine commented Jun 16, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

breezewish left a comment • edited Loading

Choose a reason for hiding this comment

AndreMouche commented Jun 22, 2020

ti-srebot commented Jun 22, 2020

baurine commented Jun 22, 2020

stale bot commented Aug 21, 2020

baurine commented Jun 15, 2020 •

edited

Loading

baurine Jun 16, 2020 •

edited

Loading

breezewish Jun 16, 2020 •

edited

Loading

baurine Jun 16, 2020 •

edited

Loading

breezewish left a comment •

edited

Loading