feat(board): redirect to custom info-page if client browser is too old

tavla/app/unsupported-browser/page.tsx

@@ -0,0 +1,13 @@
+import { IllustratedInfo } from 'app/(admin)/components/IllustratedInfo'
+
+function UnsupportedBrowser() {
+    return (
+        <IllustratedInfo
+            title="Beklager, vi støtter ikke nettleseren din!"
+            description="Dessverre krever Tavla en nyere nettleser for å fungere som den
+                skal. For hjelp, kontakt oss på tavla@entur.org."
+        ></IllustratedInfo>
+    )
+}
+
+export default UnsupportedBrowser

tavla/package.json

@@ -71,6 +71,7 @@
         "@types/react": "npm:types-react@19.0.0-rc.1",
         "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
         "@types/semver": "7.5.8",
+        "@types/ua-parser-js": "^0.7.39",
         "@typescript-eslint/eslint-plugin": "8.12.2",
         "@typescript-eslint/parser": "8.12.2",
         "autoprefixer": "10.4.20",

tavla/pages/[id].tsx

@@ -10,13 +10,23 @@ import { useRefresh } from 'hooks/useRefresh'
 import { getBackendUrl } from 'utils/index'
 import Head from 'next/head'
 import { useEffect } from 'react'
+import { GetServerSideProps } from 'next'
+import { isUnsupportedBrowser } from 'utils/browserDetection'
+
+export const getServerSideProps: GetServerSideProps = async (context) => {
+    const { params, req } = context
+    const { id } = params as { id: string }
+
+    const ua = req.headers['user-agent'] || ''
+    if (isUnsupportedBrowser(ua)) {
+        return {
+            redirect: {
+                destination: '/unsupported-browser',
+                permanent: false,
+            },
+        }
+    }
 
-export async function getServerSideProps({
-    params,
-}: {
-    params: { id: string }
-}) {
-    const { id } = params
     const board: TBoard | undefined = await getBoard(id)
 
     if (!board) {

tavla/src/Shared/utils/browserDetection.ts

@@ -0,0 +1,60 @@
+import semver from 'semver'
+import { UAParser } from 'ua-parser-js'
+
+/* Browser helpers */
+
+// Minimum versions for each browser and engine in full semver format
+const MIN_VERSIONS: { [key: string]: string } = {
+    chrome: '45.0.0',
+    firefox: '49.0.0',
+    safari: '9.1.0',
+}
+
+// Map engine names to browser names for minimum version lookup
+const ENGINE_TO_BROWSER: { [key: string]: string } = {
+    blink: 'chrome',
+    webkit: 'webkit',
+    gecko: 'firefox',
+}
+
+// Function to check if the browser is unsupported
+export function isUnsupportedBrowser(ua: string): boolean {
+    const parser = UAParser(ua)
+    const browserName = parser.browser?.name?.toLowerCase() || 'unknown'
+    const browserVersion = parser.browser?.version || '0.0.0'
+    const engineName = parser.engine?.name?.toLowerCase() || 'unknown'
+    const engineVersion = parser.engine?.version || '0.0.0'
+
+    // Initialize minVersion and currentVersion
+    let minVersion = MIN_VERSIONS[browserName]
+    let currentVersion = browserVersion
+
+    // If minVersion not found using browserName, try engineName
+    if (!minVersion) {
+        const mappedBrowserName = ENGINE_TO_BROWSER[engineName]
+        if (mappedBrowserName) {
+            minVersion = MIN_VERSIONS[mappedBrowserName]
+            currentVersion = engineVersion
+        }
+    }
+
+    // Compare the current version with the minimum required version
+    if (minVersion) {
+        return isVersionLower(currentVersion, minVersion)
+    }
+
+    // Default to supported if no minimum version info is found
+    return false
+}
+
+// Function to compare versions of browsers or engines
+function isVersionLower(currentVersion: string, minVersion: string): boolean {
+    const current = semver.coerce(currentVersion)
+    const min = semver.coerce(minVersion)
+
+    if (current && min) {
+        return semver.lt(current, min) // Returns true if current < min
+    }
+
+    return false
+}

tavla/yarn.lock

@@ -4689,6 +4689,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/ua-parser-js@npm:^0.7.39":
+  version: 0.7.39
+  resolution: "@types/ua-parser-js@npm:0.7.39"
+  checksum: 81046605eb2815b098228743b7dfde887cc8990369f2ad56e71f1400b4cef5078481c7ca91ca3dddf2e8d4e183fe93224bfdeee13bfe034a1e62d55cfbac9e26
+  languageName: node
+  linkType: hard
+
 "@types/ws@npm:^8.0.0":
   version: 8.5.13
   resolution: "@types/ws@npm:8.5.13"
@@ -14151,6 +14158,7 @@ __metadata:
     "@types/react": "npm:types-react@19.0.0-rc.1"
     "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1"
     "@types/semver": 7.5.8
+    "@types/ua-parser-js": ^0.7.39
     "@typescript-eslint/eslint-plugin": 8.12.2
     "@typescript-eslint/parser": 8.12.2
     abortcontroller-polyfill: 1.7.6