Show msg Unsupported browser

Issue

Internet Explorer 11 support deprecation and removal

According to announcement from angular, the IE 11 will be removed in the feature.

Is there any way for warning to user who uses IE to open your site?

Solution

the simple way to do that

  • check browser version when your site onload()
  • if it is unsupported browser version, -> close your site

Sourcecode example

Here is an example source.
Add it to your index.html file

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<script type="text/javascript">

      /**
       *  Check Edge is Chromium version.
       */
      function isChromium() {
        let userAgentData = navigator['userAgentData'].brands || [];
        for (let index = 0; index < userAgentData.length; index++) {
          let brand_version_pair = userAgentData[index].brand;
          if (brand_version_pair === 'Chromium') {
            return true;
          }
        }
        return false;
      }

      /**
       * Check support browser
       * Only support: Edge (Chromium) / chrome/ firefox
       */
      function isSupportedBrower() {
        let userAgent = navigator.userAgent;
        if (userAgent.indexOf('Edg') != -1) {
          // MS Edge
          if (isChromium()) {
            return true;
          }
        } else if (userAgent.indexOf('Chrome') != -1) {
          // Google chrome
          return true;
        } else if (userAgent.indexOf('Firefox') != -1) {
          // Firefox
          return true;
        } else {
          return false;
        }
      }

      const confirmBrowserMsg =
        '\n(Website cannot be used with your web browser.' +
        '\nPlease use one of the below latest browsers)' +
        '\n・Firefox' +
        '\n・Google Chrome' +
        '\n・MS Edge (Chromium)';

      window.addEventListener('load', function () {
        if (!isSupportedBrower()) {
          // Check browser
          let r = confirm(confirmBrowserMsg);
          if (r) {
            // Close current tab
            setTimeout(window.close(), 100);
          } else {
            // to continue loading
          }
        }
      });
    </script>