chore: Update browserlist config and show warning on mobile if browser doesn't match

Signed-off-by: Marcel Klehr <[email protected]>

Author: marcelklehr

gulpfile.js

@@ -303,9 +303,6 @@ const watch = function() {
       chunks: false,
       colors: true
     }))
-
-    const statsJson = stats.toJson()
-    webpackCheck(statsJson)
   })
 }
 

package-lock.json

@@ -11,7 +11,8 @@
     "watch-win": "SET NODE_OPTIONS=--max-old-space-size=8000 & gulp watch",
     "test": "node --unhandled-rejections=strict test/selenium-runner.js",
     "lint": "eslint --ext .js,.vue src",
-    "lint:fix": "eslint --ext .js,.vue src --fix"
+    "lint:fix": "eslint --ext .js,.vue src --fix",
+    "supportedBrowsers": "echo \"module.exports = $(browserslist-useragent-regexp --allowHigherVersions);\" > supportedBrowsers.js"
   },
   "repository": {
     "type": "git",
@@ -34,6 +35,7 @@
     "all-contributors-cli": "^6.19.0",
     "babel-eslint": "^10.1.0",
     "babel-loader": "8.x",
+    "browserslist-useragent-regexp": "^4.1.3",
     "chai": "^4.2.0",
     "chai-as-promised": "^7.1.1",
     "chrome-webstore-upload": "^0.4.2",

package.json

@@ -1,11 +1,18 @@
 <template>
+  <v-alert
+    v-if="!isBrowserSupported"
+    type="error">
+    {{ 'This browser or WebView is not supported' }}
+  </v-alert>
   <v-progress-circular
+    v-else
     indeterminate
     color="blue darken-1"
     class="ma-auto" />
 </template>
 
 <script>
+/* global BROWSERSLIST_REGEX */
 import { actions } from '../../store/definitions'
 import { routes } from '../../NativeRouter'
 import { SplashScreen } from '@capacitor/splash-screen'
@@ -17,6 +24,11 @@ import Logger from '../../../lib/Logger'
 
 export default {
   name: 'Home',
+  computed: {
+    isBrowserSupported() {
+      return BROWSERSLIST_REGEX.test(navigator.userAgent)
+    }
+  },
   async created() {
     SplashScreen.hide()
     await this.$store.dispatch(actions.LOAD_ACCOUNTS)

src/ui/views/native/Home.vue

@@ -108,6 +108,12 @@ module.exports = [{
     ),
     new webpack.DefinePlugin({
       'IS_BROWSER': 'true'
+    }),
+    new webpack.DefinePlugin({
+      IS_BROWSER: 'false'
+    }),
+    new webpack.DefinePlugin({
+      BROWSERSLIST_REGEX: require('./supportedBrowsers')
     })
   ]
 }, {
@@ -130,6 +136,9 @@ module.exports = [{
     ),
     new webpack.DefinePlugin({
       IS_BROWSER: 'false'
+    }),
+    new webpack.DefinePlugin({
+      BROWSERSLIST_REGEX: require('./supportedBrowsers')
     })
   ]
 },