Move browser upgrade page

rileytb · rileytb · commit 2038d3774fa6 · 2024-07-22T17:03:00.000-06:00
- add modernizr
- config modernizr
- add in tests and initial banner logic
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
   ],
   "scripts": {
     "build": "cd packages/react-scripts && node bin/react-scripts.js build",
+    "pre:build": "cd packages/react-scripts && npm run modernizr",
     "changelog": "lerna-changelog",
     "create-react-app": "node tasks/cra.js",
     "e2e": "tasks/e2e-simple.sh",
diff --git a/packages/react-scripts/.nvmrc b/packages/react-scripts/.nvmrc
@@ -1 +1,2 @@
-16
+20
+// todo revert this, only done to npm link
diff --git a/packages/react-scripts/layout/views/layout.ejs b/packages/react-scripts/layout/views/layout.ejs
@@ -30,6 +30,11 @@
     <% if (process.env.NODE_ENV === 'production') { %>
       <% include partials/dynatrace %>
     <% } %>
+
+    <script>
+      <% include ../../modernizr.js %>
+    </script>
+
     <script>
       window.SERVER_DATA = {};
       <%- typeof cacheKey !== 'undefined' ? `SERVER_DATA.cacheKey = '${cacheKey}';` : ''; %>
@@ -50,6 +55,12 @@
     </script>
   </head>
   <body>
+    <header id="outdated-browser" style="display: none">
+      <p>Your browser is outdated. Please consider upgrading to a modern browser for a better experience.</p>
+    </header>
     <%- body %>
+    <script>
+      <% include partials/featureDetection %>
+    </script>
   </body>
 </html>
diff --git a/packages/react-scripts/layout/views/partials/featureDetection.ejs b/packages/react-scripts/layout/views/partials/featureDetection.ejs
@@ -0,0 +1,10 @@
+const header = document.getElementById('outdated-browser');
+
+console.log('Checking for outdated browser message', Modernizr);
+
+const outdatedFeatures = Object.keys(Modernizr).filter(feature => !Modernizr[feature]);
+
+if (outdatedFeatures.length > 0 && header) {
+  header.style.display = 'block';
+  console.log('Outdated browser message displayed:', outdatedFeatures);
+}
diff --git a/packages/react-scripts/modernizr-config.json b/packages/react-scripts/modernizr-config.json
@@ -0,0 +1,12 @@
+{
+    "minify": true,
+    "options": [
+      "addTest"
+    ],
+    "feature-detects": [
+      "test/es6/promises",
+      "test/network/fetch",
+      "test/url/parser",
+      "test/dom/intersection-observer"
+    ]
+}
diff --git a/packages/react-scripts/modernizr.js b/packages/react-scripts/modernizr.js
diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
@@ -17,7 +17,8 @@
   },
   "scripts": {
     "prettier": "npx prettier --arrow-parens always --single-quote --trailing-comma es5 --print-width 120 --no-semi --write \"template*/**/*.js\"",
-    "fs-publish": "npmPublish"
+    "fs-publish": "npmPublish",
+    "modernizr": "modernizr -c modernizr-config.json"
   },
   "files": [
     "bin",
@@ -124,6 +125,7 @@
     "babel-plugin-react-docgen": "^3.0.0",
     "graphql-tag": "^2.12.6",
     "i18next": "19.8.7",
+    "modernizr": "^3.13.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-i18next": "^11.0.1",
@@ -134,9 +136,9 @@
     "fsevents": "^2.3.2"
   },
   "peerDependencies": {
+    "@fs/eslint-config-frontier-react": ">=10.0.0",
     "react": ">= 16",
-    "typescript": "^3.2.1 || ^4 || ^5",
-    "@fs/eslint-config-frontier-react": ">=10.0.0"
+    "typescript": "^3.2.1 || ^4 || ^5"
   },
   "peerDependenciesMeta": {
     "typescript": {

Original file line number	Diff line number	Diff line change
`@@ -1 +1,2 @@`
`1`		`-16`
	`1`	`+20`
	`2`	`+// todo revert this, only done to npm link`