iOS16.3以前のユーザーに警告を表示

MurakawaTakuya · Jan 11, 2025 · 0be9ace · 0be9ace
1 parent 37a5daa
commit 0be9ace
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 54 deletions.
diff --git a/functions/src/index.ts b/functions/src/index.ts
@@ -33,7 +33,7 @@ const verifyAppCheckToken = async (
   const appCheckToken = req.get("X-Firebase-AppCheck");
 
   if (!appCheckToken) {
-    res
+    return res
       .status(400)
       .send({ message: "Authentication error: App Check token is missing." });
   }
@@ -43,10 +43,10 @@ const verifyAppCheckToken = async (
       .appCheck()
       .verifyToken(appCheckToken as string);
     console.log("Verified App Check Token:", decodedToken);
-    next();
+    return next();
   } catch (error) {
     logger.error(`Invalid App Check token with ${appCheckToken}:`, error);
-    res.status(401).send("Invalid App Check token.");
+    return res.status(401).send("Invalid App Check token.");
   }
 };
 
@@ -55,7 +55,7 @@ if (process.env.NODE_ENV === "production") {
   app.use((req, res, next) => {
     if (req.headers.token === process.env.NOTIFICATION_KEY) {
       // tasksからの/notificationの場合はスキップ
-      next();
+      return next();
     } else {
       verifyAppCheckToken(req, res, next);
     }

diff --git a/src/Components/Account/AuthForm.tsx b/src/Components/Account/AuthForm.tsx
@@ -16,7 +16,6 @@ import { RoundedButton } from "./LoggedInView";
 const CenteredToggleButtonGroup = styled(ToggleButtonGroup)({
   display: "flex",
   justifyContent: "center",
-  marginBottom: "10px",
 });
 
 export default function AuthForm() {
@@ -82,9 +81,17 @@ export default function AuthForm() {
           ログイン
         </ToggleButton>
       </CenteredToggleButtonGroup>
+
+      {typeof Notification === "undefined" && (
+        <Typography color="danger" level="body-sm">
+          この端末のでは通知やGoogleログイン等の機能が使用できません。
+          {/iPad|iPhone|iPod/.test(navigator.userAgent) &&
+            "iOS 16.4以降に更新してください"}
+        </Typography>
+      )}
+
       {formMode === "register" ? (
         <>
-          <Typography sx={{ marginBottom: "5px" }}>新規登録</Typography>
           <form onSubmit={handleRegisterSubmit}>
             <Box
               sx={{
@@ -93,6 +100,7 @@ export default function AuthForm() {
                 gap: "12px",
               }}
             >
+              <Typography>新規登録</Typography>
               <TextField
                 label="ユーザー名"
                 value={name}
@@ -139,7 +147,6 @@ export default function AuthForm() {
         </>
       ) : (
         <>
-          <Typography sx={{ marginBottom: "5px" }}>ログイン</Typography>
           <form onSubmit={handleLoginSubmit}>
             <Box
               sx={{
@@ -148,6 +155,7 @@ export default function AuthForm() {
                 gap: "12px",
               }}
             >
+              <Typography>ログイン</Typography>
               <TextField
                 label="メールアドレス"
                 type="email"
@@ -185,7 +193,9 @@ export default function AuthForm() {
           </form>
         </>
       )}
-      <Divider sx={{ margin: "12px 0" }}>または</Divider>
+
+      <Divider>または</Divider>
+
       <div style={{ display: "flex", flexWrap: "wrap", gap: "12px" }}>
         <RoundedButton
           fullWidth
@@ -217,6 +227,7 @@ export default function AuthForm() {
             "ゲストログイン"
           )}
         </RoundedButton>
+
         <Typography level="body-xs">
           ゲストログインを使用するとアカウントを作成せずに閲覧できます。
           (投稿機能は使用できません。)

diff --git a/src/Components/Account/LoggedInView.tsx b/src/Components/Account/LoggedInView.tsx
@@ -42,7 +42,7 @@ export default function LoggedInView() {
   }
 
   return (
-    <div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
+    <>
       {user.loginType === "Guest" ? (
         <Typography level="body-lg" sx={{ textAlign: "center" }}>
           ゲストとしてログイン中
@@ -104,6 +104,6 @@ export default function LoggedInView() {
           </div>
         </>
       )}
-    </div>
+    </>
   );
 }
diff --git a/src/app/account/page.tsx b/src/app/account/page.tsx
@@ -40,25 +40,16 @@ export default function Account() {
   const [isIOS, setIsIOS] = useState(false);
   const [isPWA, setIsPWA] = useState(false);
   const [PWAReady, setPWAReady] = useState(false);
+  const [isNotificationUnavailable, setIsNotificationUnavailable] =
+    useState(false);
 
-  // iOSか判定
   useEffect(() => {
-    const checkIOS = () => {
-      const userAgent = navigator.userAgent || navigator.vendor;
-      return /iPad|iPhone|iPod/.test(userAgent);
-    };
-    setIsIOS(checkIOS());
-  }, []);
-
-  // PWAか判定
-  useEffect(() => {
-    const checkPWA = () => {
-      return (
-        window.matchMedia("(display-mode: standalone)").matches ||
+    setIsIOS(/iPad|iPhone|iPod/.test(navigator.userAgent));
+    setIsPWA(
+      window.matchMedia("(display-mode: standalone)").matches ||
         window.navigator.standalone === true
-      );
-    };
-    setIsPWA(checkPWA());
+    );
+    setIsNotificationUnavailable(typeof Notification === "undefined");
   }, []);
 
   return (
@@ -79,7 +70,7 @@ export default function Account() {
           >
             TODO REAL
           </Typography>
-          <Box sx={{ display: "flex", flexDirection: "column" }}>
+          <Box sx={{ display: "flex", flexDirection: "column", gap: "8px" }}>
             {user ? <LoggedInView /> : <AuthForm />}
           </Box>
         </Card>
@@ -94,6 +85,7 @@ export default function Account() {
             >
               通知を受信・アプリに追加
             </Typography>
+
             <div className={styles.buttonContainer}>
               <div>
                 <PWAButton
@@ -107,39 +99,55 @@ export default function Account() {
                   defaultDisabled={
                     (isIOS && !isPWA) ||
                     user?.loginType === "Guest" ||
-                    !user?.isMailVerified
+                    !user?.isMailVerified ||
+                    isNotificationUnavailable
                   }
                 />
               </div>
             </div>
-            {!PWAReady && (
-              <Typography color="danger" textAlign="center">
-                PWAを準備中です。しばらくしてからページを更新してください。
-              </Typography>
-            )}
-            {(user?.loginType === "Guest" || !user?.isMailVerified) && (
-              <Typography color="danger" textAlign="center">
-                通知を利用するには認証が必要です。
-              </Typography>
-            )}
-            <Typography>
-              アプリに追加をすると、端末のホーム画面やアプリ一覧から起動できるようになります。
-            </Typography>
-            <Typography color="neutral" level="body-xs">
-              通知を複数端末で登録した場合は、最後に登録した端末に送信します。
-              <br />
-              通知が受信できない場合はブラウザやサイトの権限を確認してください。
-            </Typography>
-            {isIOS && (
+
+            {isNotificationUnavailable ? (
               <>
-                <Typography color="danger">
-                  iOSでは通常ブラウザで通知機能と「アプリに追加」ボタンを使用できません。以下の画像のように「ホーム画面に追加」を押してから、ホーム画面から起動してください。
+                <Typography color="danger" level="body-sm">
+                  この端末ではアプリ機能や通知機能が使用できません。
+                  {isIOS && "iOS 16.4以降に更新してください"}
                 </Typography>
-                <img
-                  src="/img/iOSPWA.webp"
-                  alt="iOS PWA"
-                  style={{ width: "80%", margin: "0 auto" }}
-                />
+              </>
+            ) : (
+              <>
+                {!PWAReady && (
+                  <Typography color="danger" textAlign="center">
+                    PWAを起動中です。しばらくしてから再度お試しください。
+                  </Typography>
+                )}
+                {(user?.loginType === "Guest" || !user?.isMailVerified) && (
+                  <Typography color="danger" textAlign="center">
+                    通知を利用するには認証が必要です。
+                  </Typography>
+                )}
+
+                <Typography>
+                  アプリに追加をすると、端末のホーム画面やアプリ一覧から起動できるようになります。
+                </Typography>
+                <Typography color="neutral" level="body-xs">
+                  通知を複数端末で登録した場合は、最後に登録した端末に送信します。
+                  <br />
+                  通知が受信できない場合はブラウザやサイトの権限を確認してください。
+                </Typography>
+
+                {/* iOSのPWAの追加方法 */}
+                {isIOS && (
+                  <>
+                    <Typography color="danger">
+                      iOSでは通常ブラウザで通知機能と「アプリに追加」ボタンを使用できません。以下の画像のように「ホーム画面に追加」を押してから、ホーム画面から起動してください。
+                    </Typography>
+                    <img
+                      src="/img/iOSPWA.webp"
+                      alt="iOS PWA"
+                      style={{ width: "80%", margin: "0 auto" }}
+                    />
+                  </>
+                )}
               </>
             )}
           </Card>

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -39,6 +39,7 @@ export default function RootLayout({
         <meta property="og:image" content={`${rootURL}/img/thumbnail.png`} />
         <meta property="og:url" content={`${rootURL}`} />
         <meta property="og:type" content="website" />
+
         {/* Twitter Card */}
         <meta name="twitter:card" content="summary_large_image" />
         <meta name="twitter:title" content="TODO REAL" />