PWA 安装提示: 仅mobile

src/views/AuthApp.jsx

@@ -21,33 +21,12 @@ function AuthApp() {
 
   const href = useHref()
 
-  // Whether we are running as an installed PWA or not.
-  const isInstalledPWA = window.matchMedia('(display-mode: window-controls-overlay)').matches ||
-                          window.matchMedia('(display-mode: standalone)').matches;
   const [connectWebsocket, fetchInitialData, disconnectWebsocket ] = useConversationStore((state) => [
     state.connectWebsocket,
     state.fetchInitialData,
     state.disconnectWebsocket,
   ]);
   useEffect(() => {
-    if (! isInstalledPWA) {
-      document.getElementById('about-dialog').showModal();
-    }
-    if (!isInstalledPWA ) {
-      window.addEventListener('beforeinstallprompt', e => {
-        // Don't let the default prompt go.
-        e.preventDefault();
-
-        // Instead, wait for the user to click the install button.
-        document.getElementById('about-dialog').addEventListener('close', () => {
-          if (document.getElementById('about-dialog').returnValue === "install") {
-            e.prompt();
-          }
-        });
-      });
-    } else {
-      document.getElementById('install-button').disabled = true;
-    }
     if (!("Notification" in window)) {
       alert("This browser does not support desktop notification");
     } else {

src/views/MobileApp.jsx

@@ -1,3 +1,4 @@
+import { useEffect, } from 'react'
 import '@/assets/App.css'
 import AppLogo from '@/assets/logo-gh.png'
 import { useThemeContext } from '@/stores/ThemeContext'
@@ -17,6 +18,31 @@ function MobileApp() {
     token: { colorBgContainer },
   } = theme.useToken()
 
+  useEffect(() => {
+    const handleLoad = () => {
+      const isPWAInstalled = window.matchMedia('(display-mode: window-controls-overlay)').matches || window.matchMedia('(display-mode: standalone)').matches;
+      const isStandalone = navigator.standalone || window.navigator.standalone;
+
+      if (isPWAInstalled || isStandalone) {
+        document.getElementById('install-button').disabled = true;
+      } else {
+        document.getElementById('about-dialog').showModal();
+        window.addEventListener('beforeinstallprompt', (e) => {
+          e.preventDefault();
+
+          document.getElementById('about-dialog').addEventListener('close', () => {
+            if (document.getElementById('about-dialog').returnValue === 'install') {
+              e.prompt();
+            }
+          });
+        });
+      }
+    };
+
+    window.addEventListener('load', handleLoad);
+    return () => window.removeEventListener('load', handleLoad);
+  }, []);
+
   return (
     <Layout>
       <Header className='header' style={{ position: 'sticky', top: 0, zIndex: 1, width: '100%', background: 'white' }}>