[feat] Check user's browser version and model and show message to upd…

…ate or install a new one if necessary. (#301)
someengineering · Sep 6, 2024 · 94fda8d · 94fda8d
1 parent 97823f2
commit 94fda8d
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 0 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -4,4 +4,6 @@ coverage/
 storybook-static/
 src/locales/*/
 public/*.min.js
+public/*.min.css
 index.html
+
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -24,6 +24,7 @@ export default tsEslint.config(
       '__mocks__',
       '**/index.html',
       'public/*.min.js',
+      'public/*.min.css',
       'dist',
       'storybook-static',
       'vite.config.ts',

diff --git a/index.html b/index.html
@@ -125,6 +125,35 @@
         }
       }
     </style>
+    <link rel="stylesheet" href="/outdated-browser-rework.min.css" />
+    <script src="/outdated-browser-rework.min.js"></script>
+    <script>outdatedBrowserRework({
+      browserSupport: {
+        Chrome: 450,
+        Edge: 88,
+        Safari: 14,
+        "Mobile Safari": 11,
+        Firefox: 78,
+        Opera: 50,
+        IE: false
+      },
+      requireChromeOnAndroid: false,
+      isUnknownBrowserOK: false,
+      messages: {
+        en: {
+          outOfDate: "Your browser is out of date!",
+          unsupported: "Your browser is not supported!",
+          update: {
+            web: "Update your browser to view this website correctly. ",
+            googlePlay: "Please install Chrome from Google Play",
+            appStore: "Please update iOS from the Settings App"
+          },
+          url: null,
+          close: "Close"
+        }
+      }
+    })
+    </script>
     <script type="text/javascript" src="/t.min.js"></script>
     <script nonce="{{ nonce }}">
       (function initialT() {
@@ -265,6 +294,7 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="outdated"></div>
     <div id="root">
       <div id="default-background" class="vertical-centered-box default-background"></div>
       <div class="vertical-centered-box">

diff --git a/public/outdated-browser-rework.min.css b/public/outdated-browser-rework.min.css
diff --git a/public/outdated-browser-rework.min.js b/public/outdated-browser-rework.min.js