feat:WebSerialAPIに対応していないブラウザで開くと警告のモーダルを出す

i18n/locales/en.json

@@ -25,5 +25,7 @@
   "ソースコードを非表示": "Hide source code",
   "エラーの詳細を見る": "Click to view error details",
   "クリックして閉じる": "Click to close",
-  "コマンド": "Command"
+  "コマンド": "Command",
+  "このブラウザはサポートされていません": "This Browser is Not Supported",
+  "対応するブラウザを使ってください": "Your current browser does not support some of the features of this website.\nTo use all the features of this site, please use a desktop version of Google Chrome or Microsoft Edge."
 }

i18n/locales/ja.json

@@ -25,5 +25,7 @@
   "ソースコードを非表示": "ソースコードを非表示",
   "エラーの詳細を見る": "エラーの詳細を見る",
   "クリックして閉じる": "クリックして閉じる",
-  "コマンド": "コマンド"
+  "コマンド": "コマンド",
+  "このブラウザはサポートされていません": "このブラウザはサポートされていません",
+  "対応するブラウザを使ってください": "お使いのブラウザではこのウェブサイトの一部機能が正しく動作しません。\nこのサイトのすべての機能を利用するためには、デスクトップ版のGoogle ChromeもしくはMicrosoft Edgeを使用してください。"
 }

package.json

@@ -8,7 +8,6 @@
     "build": "tsc && vite build",
     "build:ceres": "tsc && NODE_OPTIONS=--max-old-space-size=4096 vite build --mode ceres",
     "preview": "vite preview",
-    "prettier": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"",
     "check": "biome check --write",
     "check:ci": "biome ci && tsc -p . --noEmit"
   },

src/components/UnsupportedBrowserModal.tsx

@@ -0,0 +1,49 @@
+import { Modal, ModalClose, Sheet } from "@mui/joy";
+import { Typography } from "@mui/material";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+interface UnsupportedBrowserModalProps {
+  defaultOpen: boolean;
+}
+
+export const UnsupportedBrowserModal = ({
+  defaultOpen,
+}: UnsupportedBrowserModalProps) => {
+  const [open, setOpen] = useState(defaultOpen);
+  const [t] = useTranslation();
+  return (
+    <Modal
+      open={open}
+      onClose={() => setOpen(false)}
+      disableAutoFocus
+      sx={{
+        width: "90%",
+        minWidth: "500px",
+        m: "auto",
+        alignContent: "center",
+        maxWidth: "60rem",
+      }}
+    >
+      <Sheet variant="outlined" sx={{ borderRadius: "0.5rem" }}>
+        <Typography
+          fontFamily="'M PLUS Rounded 1c', sans-serif"
+          variant="h5"
+          m={1}
+          alignItems="center"
+        >
+          {t("このブラウザはサポートされていません")}
+        </Typography>
+        <ModalClose variant="plain" sx={{ m: 0.5 }} />
+
+        <Typography
+          fontFamily="'M PLUS Rounded 1c', sans-serif"
+          fontSize="sm"
+          m="0.5rem"
+          whiteSpace="pre-line"
+        >
+          {t("対応するブラウザを使ってください")}
+        </Typography>
+      </Sheet>
+    </Modal>
+  );
+};

src/pages/home.tsx

@@ -22,6 +22,7 @@ import { CompilerSelector } from "components/CompilerSelector";
 import { ControlButton } from "components/ControlButton";
 import { Log } from "components/Log";
 import { SourceCodeTab } from "components/SourceCodeTab";
+import { UnsupportedBrowserModal } from "components/UnsupportedBrowserModal";
 import { useCompile } from "hooks/useCompile";
 import { useQuery } from "hooks/useQuery";
 import { Version, useVersions } from "hooks/useVersions";
@@ -225,8 +226,11 @@ export const Home = () => {
     i18n.changeLanguage(locale);
   }, [i18n]);
 
+  // WebSerialAPIに対応するブラウザかどうかを確認
+  const isSupported = "serial" in navigator;
   return (
     <>
+      <UnsupportedBrowserModal defaultOpen={!isSupported} />
       <Box
         sx={{
           mb: "0.5rem",