Browser: Add alert for unsupported version (#436)

Author: lamATnginx

assets/js/browser-incompatibility.js

@@ -0,0 +1,40 @@
+navigator.browserVersion = (() => {
+  var ua = navigator.userAgent;
+  var tem;
+  var M =
+    ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) ||
+    [];
+  if (/trident/i.test(M[1])) {
+    tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
+    return 'IE ' + (tem[1] || '');
+  }
+  if (M[1] === 'Chrome') {
+    tem = ua.match(/\b(OPR|Edge)\/(\d+)/);
+    if (tem != null) return tem.slice(1).join(' ').replace('OPR', 'Opera');
+  }
+  M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
+  tem = ua.match(/version\/(\d+)/i);
+  if (tem != null) M.splice(1, 1, tem[1]);
+  return M.join(' ');
+})();
+
+const currentBrowser = navigator.browserVersion.split(' ').at(0);
+const currentVersion = navigator.browserVersion.split(' ').at(1);
+
+// Minimum version for FULL support. Source - https://caniuse.com/css-nesting
+const supportedNestedCSSVersion = {
+  Safari: 17.2,
+  Chrome: 112,
+  Firefox: 117,
+  Opera: 106,
+};
+
+// Set the alert if first time visiting
+if (!localStorage.getItem('isBrowserVersionChecked')) {
+  if (currentVersion < supportedNestedCSSVersion[currentBrowser]) {
+    alert(
+      `Unsupported browser\n\n${currentBrowser} ${currentVersion} may not display this site correctly.\nUpdate to at least ${currentBrowser} ${supportedNestedCSSVersion[currentBrowser]} for the best experience.`
+    );
+  }
+  localStorage.setItem('isBrowserVersionChecked', true);
+}

layouts/partials/scripts.html

@@ -2,6 +2,10 @@
 {{ $codecopyv2 := resources.Get "/js/code-copy-v2.js" | fingerprint "sha512" }}
 <script src="{{ $codecopyv2.RelPermalink }}" type="text/javascript"></script>
 
+<!-- load browser incompatibility js -->
+{{ $browserIncompatibility := resources.Get "/js/browser-incompatibility.js" | fingerprint "sha512" }}
+<script src="{{ $browserIncompatibility.RelPermalink }}" type="text/javascript"></script>
+
 <!-- load site dropdown js -->
 {{ $siteDropdown := resources.Get "/js/site-dropdown.js" | fingerprint "sha512" }}
 <script src="{{ $siteDropdown.RelPermalink }}" type="text/javascript"></script>