Unsupported browsers

.gitignore

@@ -58,3 +58,5 @@ yarn-debug.log*
 .yarn-integrity
 .yarn
 .pnp.js
+
+/browsers.json

Gemfile

@@ -80,3 +80,5 @@ gem 'country_select'
 gem 'browser'
 
 gem 'meta-tags'
+
+gem 'browserslist_useragent'

Gemfile.lock

@@ -105,6 +105,9 @@ GEM
       msgpack (~> 1.0)
     brakeman (5.1.1)
     browser (5.3.1)
+    browserslist_useragent (0.2.0)
+      semantic
+      user_agent_parser
     builder (3.2.4)
     byebug (11.1.3)
     capybara (3.35.3)
@@ -367,6 +370,7 @@ GEM
     selenium-webdriver (3.142.7)
       childprocess (>= 0.5, < 4.0)
       rubyzip (>= 1.2.2)
+    semantic (1.6.1)
     semantic_range (3.0.0)
     sidekiq (6.2.1)
       connection_pool (>= 2.2.2)
@@ -411,6 +415,7 @@ GEM
     uber (0.1.0)
     unicode-display_width (2.0.0)
     unicode_utils (1.4.0)
+    user_agent_parser (2.7.0)
     valid_email2 (4.0.0)
       activemodel (>= 3.2)
       mail (~> 2.5)
@@ -441,6 +446,7 @@ DEPENDENCIES
   bootsnap
   brakeman
   browser
+  browserslist_useragent
   byebug
   capybara (>= 2.15)
   configus

app/helpers/application_helper.rb

@@ -117,4 +117,13 @@ def get_continue_study_path(slug)
     }
     mapping.fetch(slug, ExternalLinks.hexlet_profession)
   end
+
+  def supported_browser?
+    # NOTE https://github.com/browserslist/browserslist-useragent-ruby#3-add-helper
+    # rubocop:disable Rails/HelperInstanceVariable
+    @browsers ||= JSON.parse(File.read('browsers.json'))
+    matcher = BrowserslistUseragent::Match.new(@browsers, request.user_agent)
+    matcher.browser? && matcher.version?(allow_higher: true)
+    # rubocop:enable Rails/HelperInstanceVariable
+  end
 end

app/views/layouts/_frontend.html.slim

@@ -0,0 +1,2 @@
+- if supported_browser?
+  = render_javascript_stored_packs

app/views/layouts/application.html.slim

@@ -5,6 +5,8 @@ html.h-100 lang="#{I18n.locale}"
   body.d-flex.flex-column.h-100
     - if Rails.env.production?
       = render 'layouts/deps/gtm_body'
+    - unless supported_browser?
+      = render 'layouts/shared/unsupported_browser_warning'
     .container.mb-4
       .py-2.border-bottom
         = render 'layouts/shared/nav'

app/views/layouts/shared/_footer.html.slim

@@ -54,4 +54,4 @@ footer.bg-dark.text-light.mt-5
           a.rounded-circle target="_blank" rel="noopener noreferrer" href=ExternalLinks.hexlet_slack
             span.bi.bi-slack.text-white-50
 
-= render_javascript_stored_packs
+= render 'layouts/frontend'

app/views/layouts/shared/_unsupported_browser_warning.html.slim

@@ -0,0 +1 @@
+.alert.alert-warning[role="alert"] = t('.unsupported_browser_warning')

app/views/layouts/web/admin/application.html.slim

@@ -14,4 +14,4 @@ html.h-100 lang="#{I18n.locale}"
               = nav_menu_item t('.languages'), admin_languages_path
           .col-md-10
             = yield
-    = render_javascript_stored_packs
+    = render 'layouts/frontend'

app/views/layouts/web/languages/lessons.html.slim

@@ -4,9 +4,11 @@ html.x-h-md-100 lang="#{I18n.locale}"
     = render 'layouts/shared/head'
     = Gon::Base.render_data
   body.d-flex.flex-column.x-h-md-100
+    - unless supported_browser?
+        = render 'layouts/shared/unsupported_browser_warning'
     .container-fluid
       = render 'layouts/shared/nav'
     main.container-fluid.overflow-hidden.mb-1.x-h-md-100
       = yield
 
-    = render_javascript_stored_packs
+    = render 'layouts/frontend'

config/locales/en.layouts.yml

@@ -26,3 +26,5 @@ en:
         recommended_books: Recommended Books
         matrix: Matrix
         source_code: Source code
+      unsupported_browser_warning:
+        unsupported_browser_warning: Browser is not supported. Some features may be disabled.

config/locales/ru.layouts.yml

@@ -26,3 +26,5 @@ ru:
         recommended_books: Рекомендуемые книги
         matrix: Матрица компетентности
         source_code: Исходный код
+      unsupported_browser_warning:
+        unsupported_browser_warning: Ваш браузер устарел :( Некоторые возможности отключены. 

config/webpack/environment.js

@@ -1,6 +1,10 @@
 // @ts-check
 
 const path = require('path');
+const browserslist = require('browserslist');
+const fs = require('fs');
+
+fs.writeFileSync('./browsers.json', JSON.stringify(browserslist()));
 
 module.exports = {
   externals: {

package.json

@@ -50,6 +50,7 @@
     "@babel/preset-env": "^7.14.8",
     "@babel/preset-react": "^7.14.5",
     "@webpack-cli/serve": "^1.5.1",
+    "browserslist": "^4.16.7",
     "css-loader": "^6.2.0",
     "eslint": "^7.31.0",
     "eslint-config-airbnb": "^18.2.1",