Browser not supported

CHANGELOG.md

@@ -1,6 +1,7 @@
 # CHANGELOG
 ## Unreleased
 - Adapt layout for mobile [#134](https://github.com/CartoDB/carto-react-template/pull/134)
+- Detect unsupported browsers based on Browserslist configuration [#138](https://github.com/CartoDB/carto-react-template/pull/138)
 
 ## Not released
 - Fix number formatting issues in Safari [#133](https://github.com/CartoDB/carto-react-template/pull/133/)

README.md

@@ -248,7 +248,13 @@ cd template-sample-app/template
 yarn build
 yarn firebase deploy
 ```
+### Updating supported browsers
 
+This project supports [browserslist](https://github.com/browserslist/browserslist) and has an unsupported browser page. In case of updating browserslist configuration, ensure to update the detection script by running:
+
+```bash
+yarn updateSupportedBrowsers
+```
 
 ### Using local @carto/react library
 

template-sample-app/template.json

@@ -15,6 +15,7 @@
       "echarts-for-react": "^2.0.16",
       "history": "^5.0.0",
       "react": "^16.13.1",
+      "react-app-polyfill": "^2.0.0",
       "react-dom": "^16.13.1",
       "react-map-gl": "^5.2.8",
       "react-redux": "^7.1.3",
@@ -35,7 +36,8 @@
       "lint": "eslint './src/**/*.{js,jsx}'",
       "lint:fix": "eslint './src/**/*.{js,jsx}' --fix",
       "format": "npx prettier --write \"**/*.+(js|jsx|json|css|md)\"",
-      "hygen": "hygen"
+      "hygen": "hygen",
+      "updateSupportedBrowsers": "echo \"var browserRegex = $(npx browserslist-useragent-regexp --allowHigherVersions);\" > public/supportedBrowsers.js"
     },
     "eslintConfig": {
       "extends": "react-app"
@@ -44,7 +46,8 @@
       "production": [
         ">0.2%",
         "not dead",
-        "not op_mini all"
+        "not op_mini all",
+        "not explorer 11"
       ],
       "development": [
         "last 1 chrome version",

template-sample-app/template/package.dev.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@carto/react": "^1.0.0-beta5",
+    "@formatjs/intl-numberformat": "^6.0.0",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.56",
@@ -17,12 +18,12 @@
     "echarts-for-react": "^2.0.16",
     "history": "^5.0.0",
     "react": "^16.13.1",
+    "react-app-polyfill": "^2.0.0",
     "react-dom": "^16.13.1",
     "react-map-gl": "^5.2.8",
     "react-redux": "^7.1.3",
     "react-router-dom": "^6.0.0-beta.0",
-    "react-scripts": "3.4.3",
-    "@formatjs/intl-numberformat": "^6.0.0"
+    "react-scripts": "3.4.3"
   },
   "devDependencies": {
     "@babel/core": "^7.12.3",
@@ -49,13 +50,19 @@
     "lint": "eslint './src/**/*.{js,jsx}'",
     "lint:fix": "eslint './src/**/*.{js,jsx}' --fix",
     "format": "npx prettier --write \"**/*.+(js|jsx|json|css|md)\"",
-    "hygen": "hygen"
+    "hygen": "hygen",
+    "updateSupportedBrowsers": "echo \"var browserRegex = $(npx browserslist-useragent-regexp --allowHigherVersions);\" > public/supportedBrowsers.js"
   },
   "eslintConfig": {
     "extends": "react-app"
   },
   "browserslist": {
-    "production": [">0.2%", "not dead", "not op_mini all"],
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all",
+      "not explorer 11"
+    ],
     "development": [
       "last 1 chrome version",
       "last 1 firefox version",
@@ -68,7 +75,13 @@
     }
   },
   "lint-staged": {
-    "*.+(js|jsx)": ["yarn lint:fix", "git add"],
-    "*.+(js|jsx|json|css|md)": ["prettier --write", "git add"]
+    "*.+(js|jsx)": [
+      "yarn lint:fix",
+      "git add"
+    ],
+    "*.+(js|jsx|json|css|md)": [
+      "prettier --write",
+      "git add"
+    ]
   }
 }

template-sample-app/template/public/index.html

@@ -22,6 +22,12 @@
     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;1,400;1,600&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&display=swap" rel="stylesheet">
 
+    <script type="text/javascript" src="supportedBrowsers.js"></script>
+    <script type="text/javascript">
+      var browserSupported = browserRegex.test(navigator.userAgent);
+      if (!browserSupported) window.location.href = "/notsupported.html";
+    </script>
+
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -36,15 +42,5 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>

template-sample-app/template/public/notsupported.html

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="CARTO for React - Sample Location Intelligence Application" />
+
+    <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/favicon/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon/favicon-16x16.png">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon/favicon.ico">
+    <meta name="msapplication-TileColor" content="#ffffff">
+    <meta name="msapplication-config" content="%PUBLIC_URL%/favicon/browserconfig.xml">
+    <meta name="theme-color" content="#ffffff">
+    <link rel="manifest" href="%PUBLIC_URL%/favicon/manifest.json" />
+
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;1,400;1,600&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&display=swap" rel="stylesheet">
+
+    <title>CARTO for React Sample App</title>
+    <style>
+      body { font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 24px; background-color: #f8f9f9; color: #2c3032; }
+      .wrapper {
+        width: 412px; padding: 24px 24px 40px; border-radius: 4px; margin: 10% auto 0; text-align: center; background-color: #fff; 
+        box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.16),0px 4px 5px 0px rgba(0,0,0,0.08),0px 1px 10px 0px rgba(0,0,0,0.04);
+      }
+      h1 { font-family: 'Montserrat', sans-serif; font-size: 24px; line-height: 32px; }
+      p { letter-spacing: 0.44px; }
+      table td { padding: 8px;  }
+      table td a { display: block; width: 170px; padding: 8px; border: 1px solid #e1e3e4; border-radius: 4px; text-align: center; color: rgba(44, 48, 50, 0.6); font-size: 14px; letter-spacing: 0.1px; font-weight: 600; text-decoration: none; }
+      table td img { display: block; height: 56px; margin: 0 auto; }
+    </style>
+  </head>
+  <body>
+    <div class="wrapper">
+      <img src="/logo-primary.svg" alt="CARTO" >
+      <h1>Sorry, your browser is not supported</h1>
+      <p>Try again from the latest versions of any of these browsers:</p>
+      <table>
+        <tr>
+          <td>
+            <a href="https://www.google.com/chrome/" target="_blank">
+              <img src="/browsers/chrome.png" srcset="/browsers/chrome@2x.png 2x, /browsers/chrome@3x.png 3x">
+              Google Chrome
+            </a>
+          </td>
+          <td>
+            <a href="https://www.microsoft.com/edge" target="_blank">
+              <img src="/browsers/edge.png" srcset="/browsers/edge@2x.png 2x, /browsers/edge@3x.png 3x">
+              Microsoft Edge
+            </a>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <a href="https://www.mozilla.org/firefox/new/" target="_blank">
+              <img src="/browsers/firefox.png" srcset="/browsers/firefox@2x.png 2x, /browsers/firefox@3x.png 3x">
+              Mozilla Firefox
+            </a>
+          </td>
+          <td>
+            <a href="https://www.opera.com/" target="_blank">
+              <img src="/browsers/opera.png" srcset="/browsers/opera@2x.png 2x, /browsers/opera@3x.png 3x">
+              Opera Browser
+            </a>
+          </td>
+        </tr>
+      </table>
+    </div>
+  </body>
+</html>

template-sample-app/template/src/index.js

@@ -4,6 +4,7 @@
  *  - react router
  *  - main component: App
  */
+import 'react-app-polyfill/stable';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';

template-skeleton/template.json

@@ -14,6 +14,7 @@
       "echarts-for-react": "^2.0.16",
       "history": "^5.0.0",
       "react": "^16.13.1",
+      "react-app-polyfill": "^2.0.0",
       "react-dom": "^16.13.1",
       "react-map-gl": "^5.2.8",
       "react-redux": "^7.1.3",
@@ -34,7 +35,8 @@
       "lint": "eslint './src/**/*.{js,jsx}'",
       "lint:fix": "eslint './src/**/*.{js,jsx}' --fix",
       "format": "npx prettier --write \"**/*.+(js|jsx|json|css|md)\"",
-      "hygen": "hygen"
+      "hygen": "hygen",
+      "updateSupportedBrowsers": "echo \"var browserRegex = $(npx browserslist-useragent-regexp --allowHigherVersions);\" > public/supportedBrowsers.js"
     },
     "eslintConfig": {
       "extends": "react-app"
@@ -43,7 +45,8 @@
       "production": [
         ">0.2%",
         "not dead",
-        "not op_mini all"
+        "not op_mini all",
+        "not explorer 11"
       ],
       "development": [
         "last 1 chrome version",

template-skeleton/template/package.dev.json

@@ -16,6 +16,7 @@
     "echarts-for-react": "^2.0.16",
     "history": "^5.0.0",
     "react": "^16.13.1",
+    "react-app-polyfill": "^2.0.0",
     "react-dom": "^16.13.1",
     "react-map-gl": "^5.2.8",
     "react-redux": "^7.1.3",
@@ -47,13 +48,19 @@
     "lint": "eslint './src/**/*.{js,jsx}'",
     "lint:fix": "eslint './src/**/*.{js,jsx}' --fix",
     "format": "npx prettier --write \"**/*.+(js|jsx|json|css|md)\"",
-    "hygen": "hygen"
+    "hygen": "hygen",
+    "updateSupportedBrowsers": "echo \"var browserRegex = $(npx browserslist-useragent-regexp --allowHigherVersions);\" > public/supportedBrowsers.js"
   },
   "eslintConfig": {
     "extends": "react-app"
   },
   "browserslist": {
-    "production": [">0.2%", "not dead", "not op_mini all"],
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all",
+      "not explorer 11"
+    ],
     "development": [
       "last 1 chrome version",
       "last 1 firefox version",

template-skeleton/template/public/index.html

@@ -21,6 +21,12 @@
 
     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;1,400;1,600&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&display=swap" rel="stylesheet">
+
+    <script type="text/javascript" src="supportedBrowsers.js"></script>
+    <script type="text/javascript">
+      var browserSupported = browserRegex.test(navigator.userAgent);
+      if (!browserSupported) window.location.href = "/notsupported.html";
+    </script>
 
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.

template-skeleton/template/public/notsupported.html

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="CARTO for React - Sample Location Intelligence Application" />
+
+    <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/favicon/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon/favicon-16x16.png">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon/favicon.ico">
+    <meta name="msapplication-TileColor" content="#ffffff">
+    <meta name="msapplication-config" content="%PUBLIC_URL%/favicon/browserconfig.xml">
+    <meta name="theme-color" content="#ffffff">
+    <link rel="manifest" href="%PUBLIC_URL%/favicon/manifest.json" />
+
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;1,400;1,600&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&display=swap" rel="stylesheet">
+
+    <title>CARTO for React Sample App</title>
+    <style>
+      body { font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 24px; background-color: #f8f9f9; color: #2c3032; }
+      .wrapper {
+        width: 412px; padding: 24px 24px 40px; border-radius: 4px; margin: 10% auto 0; text-align: center; background-color: #fff; 
+        box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.16),0px 4px 5px 0px rgba(0,0,0,0.08),0px 1px 10px 0px rgba(0,0,0,0.04);
+      }
+      h1 { font-family: 'Montserrat', sans-serif; font-size: 24px; line-height: 32px; }
+      p { letter-spacing: 0.44px; }
+      table td { padding: 8px;  }
+      table td a { display: block; width: 170px; padding: 8px; border: 1px solid #e1e3e4; border-radius: 4px; text-align: center; color: rgba(44, 48, 50, 0.6); font-size: 14px; letter-spacing: 0.1px; font-weight: 600; text-decoration: none; }
+      table td img { display: block; height: 56px; margin: 0 auto; }
+    </style>
+  </head>
+  <body>
+    <div class="wrapper">
+      <img src="/logo-primary.svg" alt="CARTO" >
+      <h1>Sorry, your browser is not supported</h1>
+      <p>Try again from the latest versions of any of these browsers:</p>
+      <table>
+        <tr>
+          <td>
+            <a href="https://www.google.com/chrome/" target="_blank">
+              <img src="/browsers/chrome.png" srcset="/browsers/chrome@2x.png 2x, /browsers/chrome@3x.png 3x">
+              Google Chrome
+            </a>
+          </td>
+          <td>
+            <a href="https://www.microsoft.com/edge" target="_blank">
+              <img src="/browsers/edge.png" srcset="/browsers/edge@2x.png 2x, /browsers/edge@3x.png 3x">
+              Microsoft Edge
+            </a>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <a href="https://www.mozilla.org/firefox/new/" target="_blank">
+              <img src="/browsers/firefox.png" srcset="/browsers/firefox@2x.png 2x, /browsers/firefox@3x.png 3x">
+              Mozilla Firefox
+            </a>
+          </td>
+          <td>
+            <a href="https://www.opera.com/" target="_blank">
+              <img src="/browsers/opera.png" srcset="/browsers/opera@2x.png 2x, /browsers/opera@3x.png 3x">
+              Opera Browser
+            </a>
+          </td>
+        </tr>
+      </table>
+    </div>
+  </body>
+</html>

template-skeleton/template/src/index.js

@@ -4,6 +4,7 @@
  *  - react router
  *  - main component: App
  */
+import 'react-app-polyfill/stable';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';