Refactor Bad Browser Check (#1996)

* move bad browser check into standalone files

* refactor dup var

* remove console logs

* have warning support all browser versions

* Revert "have warning support all browser versions".

Webpack conventions still cause IE8 to break.

This reverts commit a853103862.

* correct typo

common/badBrowserCheckA.js

@@ -0,0 +1,9 @@
+
+// use dates as vars so they're not stripped out by minification
+let letCheck = new Date();
+const constCheck = new Date();
+const arrowCheck = (() => new Date())();
+
+if (letCheck && constCheck && arrowCheck) {
+  window.localStorage.setItem('goodBrowser', 'true');
+}

common/badBrowserCheckB.js

@@ -0,0 +1,33 @@
+var badBrowser = false;
+
+try {
+  // Local storage
+  window.localStorage.setItem('test', 'test');
+  window.localStorage.removeItem('test');
+
+  // Flexbox
+  var elTest = document.createElement('div');
+  elTest.style.display = 'flex';
+  if (elTest.style.display !== 'flex') {
+    badBrowser = true;
+  }
+
+  // const and let check from badBrowserCheckA.js
+  if (window.localStorage.goodBrowser !== 'true') {
+    badBrowser = true;
+  }
+  window.localStorage.removeItem('goodBrowser');
+    
+} catch (err) {
+  badBrowser = true;
+}
+
+if (badBrowser) {
+  var el = document.getElementsByClassName('BadBrowser')[0];
+  el.className += ' is-open';
+  // Dumb check for known mobile OS's. Not important to catch all, just
+  // displays more appropriate information.
+  if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
+    el.className += ' is-mobile';
+  }
+}

common/index.html

@@ -71,40 +71,6 @@
     </div>
   </div>
 
-  <script>
-    (function () {
-      var badBrowser = false;
-
-      try {
-        // Let and const
-        eval('let a = 1;');
-        eval('const b = 1');
-
-        // Local storage
-        window.localStorage.setItem('test', 'test');
-        window.localStorage.removeItem('test');
-
-        // Flexbox
-        var el = document.createElement('div');
-        el.style.display = 'flex';
-        if (el.style.display !== 'flex') {
-          badBrowser = false;
-        }
-      } catch (err) {
-        badBrowser = true;
-      }
-
-      if (badBrowser) {
-        var el = document.getElementsByClassName('BadBrowser')[0];
-        el.className += ' is-open';
-        // Dumb check for known mobile OS's. Not important to catch all, just
-        // displays more appropriate information.
-        if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
-          el.className += ' is-mobile';
-        }
-      }
-    })();
-  </script>
 </body>
 
 </html>

webpack_config/makeConfig.js

@@ -32,6 +32,8 @@ module.exports = function(opts = {}) {
   // ====== Entry =======
   // ====================
   const entry = {
+    badBrowserCheckA: './common/badBrowserCheckA.js',
+    badBrowserCheckB: './common/badBrowserCheckB.js',
     client: './common/index.tsx'
   };