Merge pull request #4839 from DestinyItemManager/browsercheck

Improve browsercheck script

config/webpack.js

@@ -16,6 +16,7 @@ const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
 const csp = require('./content-security-policy');
 const PacktrackerPlugin = require('@packtracker/webpack-plugin');
+const browserslist = require('browserslist');
 
 const Visualizer = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
@@ -99,7 +100,9 @@ module.exports = (env) => {
       // Extract the runtime into a separate chunk
       runtimeChunk: 'single',
       splitChunks: {
-        chunks: 'all',
+        chunks(chunk) {
+          return chunk !== 'browsercheck';
+        },
         automaticNameDelimiter: '-'
       },
       minimizer: [
@@ -124,7 +127,7 @@ module.exports = (env) => {
       rules: [
         {
           test: /\.js$/,
-          exclude: [/node_modules/],
+          exclude: [/node_modules/, /browsercheck\.js$/],
           loader: 'babel-loader',
           options: {
             cacheDirectory: true
@@ -331,7 +334,7 @@ module.exports = (env) => {
           '22022180893-raop2mu1d7gih97t5da9vj26quqva9dc.apps.googleusercontent.com'
         ),
 
-        $BROWSERS: JSON.stringify(packageJson.browserslist),
+        $BROWSERS: JSON.stringify(browserslist(packageJson.browserslist)),
 
         // Feature flags!
 

jest.config.js

@@ -2,14 +2,17 @@ const { pathsToModuleNameMapper } = require('ts-jest/utils');
 const { compilerOptions } = require('./tsconfig');
 
 module.exports = {
+  transform: { '\\.(t|j)s$': ['ts-jest'] },
   preset: 'ts-jest',
   verbose: true,
   moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, { prefix: '<rootDir>/' }),
   globals: {
+    $BROWSERS: [],
     'ts-jest': {
       tsConfig: {
         target: 'ES2015',
-        jsx: 'react'
+        jsx: 'react',
+        allowJs: true
       }
     }
   }

package.json

@@ -44,8 +44,7 @@
     "last 2 Safari versions",
     "iOS >= 11",
     "last 2 Edge versions",
-    "last 2 Opera versions",
-    "unreleased versions"
+    "last 2 Opera versions"
   ],
   "devDependencies": {
     "@babel/core": "^7.0.0",

src/browsercheck.js

@@ -1,4 +1,3 @@
-import browserslist from 'browserslist';
 import parser from 'ua-parser-js';
 
 // Adapted from 'is-browser-supported' npm package. Separate from index.js so it'll run even if that fails.
@@ -20,14 +19,14 @@ function getBrowserName(agent) {
 }
 
 function getBrowserVersionFromUserAgent(agent) {
-  var browserName = getBrowserName(agent);
+  var browserName = getBrowserName(agent).toLowerCase();
   var version = (browserName === 'ios_saf'
     ? agent.os.version
     : agent.browser.version || agent.os.version || ''
   ).split('.');
   while (version.length > 0) {
     try {
-      return browserslist(browserName + ' ' + version.join('.'))[0];
+      return browserName + ' ' + version.join('.');
     } catch (e) {
       // Ignore unknown browser query error
     }
@@ -36,24 +35,54 @@ function getBrowserVersionFromUserAgent(agent) {
   return 'unknown';
 }
 
-var agent = parser(navigator.userAgent);
-var browsersSupported = browserslist($BROWSERS);
-var browser = getBrowserVersionFromUserAgent(agent);
-var supported = browsersSupported.indexOf(browser) >= 0;
-
-if (!supported && agent.os.name !== 'Android') {
-  // Detect anything based on chrome as if it were chrome
-  var chromeMatch = /Chrome\/(\d+)/.exec(agent.ua);
-  if (chromeMatch) {
-    browser = 'chrome ' + chromeMatch[1];
-    supported = browsersSupported.indexOf(browser) >= 0;
+export function isSupported(browsersSupported, userAgent) {
+  var agent = parser(userAgent);
+
+  // Build a map from browser version to minimum supported version
+  var minBrowserVersions = {};
+  for (var i = 0; i < browsersSupported.length; i++) {
+    // ios_saf 11.0-11.2 => [ios_saf, 11.0, 11.2]
+    var supportedBrowserVersion = browsersSupported[i].split(/[- ]/);
+    minBrowserVersions[supportedBrowserVersion[0]] = Math.min(
+      minBrowserVersions[supportedBrowserVersion[0]] || 999999,
+      parseFloat(supportedBrowserVersion[1])
+    );
+  }
+
+  function isBrowserSupported(browser) {
+    var nameAndVersion = browser.split(' ');
+    if (
+      minBrowserVersions[nameAndVersion[0]] &&
+      minBrowserVersions[nameAndVersion[0]] <= parseFloat(nameAndVersion[1])
+    ) {
+      return true;
+    }
+    return false;
+  }
+
+  var browser = getBrowserVersionFromUserAgent(agent);
+  var supported = isBrowserSupported(browser);
+
+  if (!supported && agent.os.name !== 'Android') {
+    // Detect anything based on chrome as if it were chrome
+    var chromeMatch = /Chrome\/(\d+)/.exec(agent.ua);
+    if (chromeMatch) {
+      browser = 'chrome ' + chromeMatch[1];
+      supported = isBrowserSupported(browser);
+    }
   }
+  if (!supported) {
+    console.warn(
+      'Browser ' + browser + ' is not supported by DIM. Supported browsers:',
+      browsersSupported
+    );
+  }
+  return supported;
 }
 
-if (!supported) {
-  console.warn(
-    'Browser ' + browser + ' is not supported by DIM. Supported browsers:',
-    browsersSupported
-  );
-  document.getElementById('browser-warning').style.display = 'block';
+if ($BROWSERS.length) {
+  var supported = isSupported($BROWSERS, navigator.userAgent);
+  if (!supported) {
+    document.getElementById('browser-warning').style.display = 'block';
+  }
 }

src/browsercheck.test.ts

@@ -0,0 +1,64 @@
+import { isSupported } from './browsercheck';
+
+// A snapshot of our support list so these tests will always work
+const browsersSupported = [
+  'and_chr 78',
+  'and_ff 68',
+  'chrome 78',
+  'chrome 77',
+  'edge 18',
+  'edge 17',
+  'firefox 71',
+  'firefox 70',
+  'firefox 68',
+  'ios_saf 13.2',
+  'ios_saf 13.0-13.1',
+  'ios_saf 12.2-12.4',
+  'ios_saf 12.0-12.1',
+  'ios_saf 11.3-11.4',
+  'ios_saf 11.0-11.2',
+  'opera 64',
+  'opera 63',
+  'safari 13',
+  'safari 12.1'
+];
+
+test.each([
+  [
+    'Firefox 72',
+    'Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:72.0) Gecko/20100101 Firefox/72.0',
+    true
+  ],
+  [
+    'Chrome 79',
+    'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36',
+    true
+  ],
+  [
+    'iOS 12',
+    'Mozilla/5.0 (iPod; CPU iPhone OS 12_0 like macOS) AppleWebKit/602.1.50 (KHTML, like Gecko) Version/12.0 Mobile/14A5335d Safari/602.1.50',
+    true
+  ],
+  [
+    'Edge 18',
+    'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 Edge/18.18362',
+    true
+  ],
+  [
+    'Vivaldi',
+    'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36 Vivaldi/2.10',
+    true
+  ],
+  [
+    'Opera',
+    'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36 OPR/65.0.3467.78',
+    true
+  ],
+  [
+    'Old Chrome',
+    'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.78 Safari/537.36',
+    false
+  ]
+])('%s: User agent %s, supported: %s', (_, userAgent, shouldBeSupported) => {
+  expect(isSupported(browsersSupported, userAgent)).toStrictEqual(shouldBeSupported);
+});

src/index.html

@@ -51,10 +51,14 @@
         reloading to make sure (Ctrl-F5 or Cmd-R).
       </div>
     </div>
-    <div id="browser-warning" style="padding: 1em; display: none; font-family: sans-serif;">
+    <a
+      href="https://github.com/DestinyItemManager/DIM/wiki/Supported-Browsers"
+      id="browser-warning"
+      style="padding: 1em; display: none; font-family: sans-serif;"
+    >
       Your browser is not supported by DIM. Some or all DIM functionality may not work. Please
       switch to a supported browser.
-    </div>
+    </a>
 
     <script src="https://apis.google.com/js/api.js"></script>
   </body>