Add browser version warning

src/viser/client/package.json

@@ -24,6 +24,7 @@
     "clsx": "^2.1.0",
     "colortranslator": "^4.1.0",
     "dayjs": "^1.11.10",
+    "detect-browser": "^5.3.0",
     "fflate": "^0.8.2",
     "hold-event": "^1.1.0",
     "immer": "^10.0.4",

src/viser/client/src/App.tsx

@@ -52,6 +52,7 @@ import {
 import { FrameSynchronizedMessageHandler } from "./MessageHandler";
 import { PlaybackFromFile } from "./FilePlayback";
 import GlobalGaussianSplats from "./Splatting/GaussianSplats";
+import { BrowserWarning } from "./BrowserWarning";
 
 export type ViewerContextContents = {
   messageSource: "websocket" | "file_playback";
@@ -232,6 +233,7 @@ function ViewerContents({ children }: { children: React.ReactNode }) {
             },
           }}
         />
+        <BrowserWarning />
         <ViserModal />
         <Box
           style={{

src/viser/client/src/BrowserWarning.tsx

@@ -0,0 +1,41 @@
+import { notifications } from "@mantine/notifications";
+import { detect } from "detect-browser";
+import { useEffect } from "react";
+
+export function BrowserWarning() {
+  useEffect(() => {
+    const browser = detect();
+
+    // Browser version are based loosely on support for SIMD, OffscreenCanvas.
+    //
+    // https://caniuse.com/?search=simd
+    // https://caniuse.com/?search=OffscreenCanvas
+    if (browser === null || browser.version === null) {
+      console.log("Failed to detect browser");
+      notifications.show({
+        title: "Could not detect browser version",
+        message:
+          "Your browser version could not be detected. It may not be supported.",
+        autoClose: false,
+        color: "red",
+      });
+    } else {
+      const version = parseFloat(browser.version);
+      console.log(`Detected ${browser.name} version ${version}`);
+      if (
+        (browser.name === "chrome" && version < 91) ||
+        (browser.name === "edge" && version < 91) ||
+        (browser.name === "firefox" && version < 89) ||
+        (browser.name === "opera" && version < 77) ||
+        (browser.name === "safari" && version < 16.4)
+      )
+        notifications.show({
+          title: "Unsuppported browser",
+          message: `Your browser (${browser.name.slice(0, 1).toUpperCase() + browser.name.slice(1)}/${browser.version}) is outdated, which may cause problems. Consider updating.`,
+          autoClose: false,
+          color: "red",
+        });
+    }
+  });
+  return null;
+}

src/viser/client/yarn.lock

@@ -1907,6 +1907,11 @@ dequal@^2.0.0:
   resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
   integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
 
+detect-browser@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/detect-browser/-/detect-browser-5.3.0.tgz#9705ef2bddf46072d0f7265a1fe300e36fe7ceca"
+  integrity sha512-53rsFbGdwMwlF7qvCt0ypLM5V5/Mbl0szB7GPN8y9NCcbknYOeVVXdrXEq+90IwAfrrzt6Hd+u2E2ntakICU8w==
+
 detect-gpu@^5.0.28:
   version "5.0.38"
   resolved "https://registry.yarnpkg.com/detect-gpu/-/detect-gpu-5.0.38.tgz#1c05ce728ea1229d16db15b865631609bf0d6952"