Skip to content

Commit a26d865

Browse files
rileytbredbugz
rileytb
and
redbugz
authored
Unsupported browser page (#356)
* Move browser upgrade page - add modernizr - config modernizr - add in tests and initial banner logic * Style up the header * Update name to match snow localization * update modernizr config * Add feature flag frontier_snow_unsupportedBrowser * Remove flag check - doesn't work there * Add flag check for featureDetection/unsupportedBanner * Fixing merge conflict * Fixing naming * Revert .nvmrc (was changed for local testing) * Update version * Remove the browser header if flag disabled * Don't add feature checking if new browser upgrade page flag is disabled * Add modernizr section to README * Move modernizr script into react-scripts only * Fix feature flag check * Check if Modernizer is available before feature detection check * remove modernizr to be ignored * Update README.md * Fallback if unsupportedBrowserHeaderText doesn't exist. * fix flag lookups * if string is not available, hide entire banner instead of just a floating svg * improve modernizr publishing and clean up header when not active --------- Co-authored-by: Logan Allred <[email protected]>
1 parent 50cbb32 commit a26d865

File tree

9 files changed

+276
-3
lines changed

9 files changed

+276
-3
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,4 @@ yarn-debug.log*
1212
yarn-error.log*
1313
/.changelog
1414
.npm/
15+
packages/react-scripts/layout/modernizr.js

‎CHANGELOG-FRONTIER.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
## 8.7.7
2+
3+
- Add in feature detection and unsupported browser banner. Based on the frontier_snow_unsupportedBrowser flag. Uses the unsupportedBrowserHeaderText value from snow.
4+
15
## 8.7.6
26

37
- Adding the Array.at polyfill for older browsers

‎package-lock.json

Lines changed: 205 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/react-scripts/README.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,8 @@ Please refer to its documentation:
55

66
- [Getting Started](https://facebook.github.io/create-react-app/docs/getting-started) – How to create a new app.
77
- [User Guide](https://facebook.github.io/create-react-app/) – How to develop apps bootstrapped with Create React App.
8+
9+
## Modernizr
10+
11+
The modernizr config (in `modernizr-config.json`) is based on `packages/react-scripts/polyfills.js` and usage of the items in the config across apps.
12+
The `modernizr.js` file is generated from the config in the `prepare` script when installed and published.

‎packages/react-scripts/layout/views/layout.ejs

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,13 @@
3030
<% if (process.env.NODE_ENV === 'production') { %>
3131
<% include partials/dynatrace %>
3232
<% } %>
33+
34+
<% if (getFeatureFlag('frontier_snow_unsupportedBrowser').isOn) { %>
35+
<script>
36+
<% include ../modernizr.js %>
37+
</script>
38+
<% } %>
39+
3340
<script>
3441
window.SERVER_DATA = {};
3542
<%- typeof cacheKey !== 'undefined' ? `SERVER_DATA.cacheKey = '${cacheKey}';` : ''; %>
@@ -51,6 +58,15 @@
5158
</script>
5259
</head>
5360
<body>
61+
<% if (getFeatureFlag('frontier_snow_unsupportedBrowser').isOn) { %>
62+
<% include partials/unsupportedBrowserHeader %>
63+
<% } %>
5464
<%- body %>
65+
66+
<% if (getFeatureFlag('frontier_snow_unsupportedBrowser').isOn) { %>
67+
<script>
68+
<% include partials/featureDetection %>
69+
</script>
70+
<% } %>
5571
</body>
5672
</html>

‎packages/react-scripts/layout/views/partials/featureDetection.ejs

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
if (Modernizr) {
2+
const unsupportedBrowserHeader = document.getElementById('unsupported-browser');
3+
const outdatedFeatures = Object.keys(Modernizr).filter(feature => !Modernizr[feature]);
4+
5+
if (outdatedFeatures.length > 0 && unsupportedBrowserHeader) {
6+
unsupportedBrowserHeader.style.display = 'block';
7+
} else {
8+
unsupportedBrowserHeader.remove();
9+
}
10+
}

‎packages/react-scripts/layout/views/partials/unsupportedBrowserHeader.ejs

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<% if (typeof unsupportedBrowserHeaderText !== 'undefined') { %>
2+
<header
3+
id="unsupported-browser"
4+
style="
5+
display: none;
6+
padding: 10px 20px;
7+
color: #B14402;
8+
background-color: #FAECB4;
9+
font-size: 14px;
10+
"
11+
>
12+
<div style="display: flex; align-items: center; justify-content: center;">
13+
<svg style="flex-shrink: 0;" width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
14+
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.7299 5.26647C16.2942 4.28896 17.7051 4.28896 18.2695 5.26646L30.9677 27.2604C31.5321 28.2379 30.8266 29.4598 29.6979 29.4598H4.30146C3.17273 29.4598 2.46727 28.2379 3.03164 27.2604L15.7299 5.26647ZM18.6692 12.559H15.3301L15.6446 20.6125H18.3564L18.6692 12.559ZM18.7847 24.1542C18.7847 25.1322 17.9918 25.925 17.0138 25.925C16.0358 25.925 15.243 25.1322 15.243 24.1542C15.243 23.1762 16.0358 22.3833 17.0138 22.3833C17.9918 22.3833 18.7847 23.1762 18.7847 24.1542Z" fill="#B14402"/>
15+
</svg>
16+
<p style="padding-left: 8px;">
17+
<%- unsupportedBrowserHeaderText %>
18+
</p>
19+
</div>
20+
</header>
21+
<% } %>

‎packages/react-scripts/modernizr-config.json

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"minify": true,
3+
"feature-detects": [
4+
"test/customevent",
5+
"test/dom/intersection-observer",
6+
"test/es6/promises",
7+
"test/network/fetch",
8+
"test/url/parser"
9+
]
10+
}

‎packages/react-scripts/package.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@fs/react-scripts",
3-
"version": "8.7.6",
3+
"version": "8.7.7",
44
"upstreamVersion": "5.0.1",
55
"description": "Configuration and scripts for Create React App.",
66
"repository": {
@@ -17,7 +17,8 @@
1717
},
1818
"scripts": {
1919
"prettier": "npx prettier --arrow-parens always --single-quote --trailing-comma es5 --print-width 120 --no-semi --write \"template*/**/*.js\"",
20-
"fs-publish": "npmPublish"
20+
"fs-publish": "npmPublish",
21+
"prepare": "modernizr -c modernizr-config.json -d layout"
2122
},
2223
"files": [
2324
"bin",
@@ -125,6 +126,7 @@
125126
"babel-plugin-react-docgen": "^3.0.0",
126127
"graphql-tag": "^2.12.6",
127128
"i18next": "19.8.7",
129+
"modernizr": "^3.13.0",
128130
"react": "^18.0.0",
129131
"react-dom": "^18.0.0",
130132
"react-i18next": "^11.0.1",

0 commit comments

Comments
 (0)