pwa

src/views/AuthApp.jsx

@@ -8,6 +8,7 @@ import 'dayjs/locale/zh-cn'
 import { useEffect, useState } from 'react'
 import { Outlet, useHref, useNavigate } from 'react-router-dom'
 
+import AppLogo from '@/assets/logo-gh.png'
 import '@/assets/App.css'
 import 'react-chat-elements/dist/main.css'
 
@@ -20,12 +21,33 @@ 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 {
@@ -57,20 +79,34 @@ function AuthApp() {
         token: {
           colorPrimary: colorPrimary,
           borderRadius: borderRadius,
-          fontFamily: "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Noto Color Emoji','Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol'",
+          fontFamily:
+            "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Noto Color Emoji','Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol'",
         },
         algorithm: theme.defaultAlgorithm,
       }}
       locale={zhLocale}
-      renderEmpty={() => <Empty description={false} />}
-    >
+      renderEmpty={() => <Empty description={false} />}>
       <AntApp>
         <ErrorBoundary>
           <Outlet />
+          <dialog id='about-dialog' className='border-0'>
+            <img className='logo' src={AppLogo} alt='logo' />
+            <section className='about'>
+              <h1>销售平台</h1>
+              <h2>Sales CRM</h2>
+              <p>Haina travel global sales CRM system</p>
+            </section>
+            <form className='actions flex gap-1' method='dialog'>
+              <button value='cancel' className='px-4 py-2 rounded-full border-0'>Close</button>
+              <button value='install' id='install-button' className='px-4 py-2 rounded-full border-0 border-transparent bg-indigo-500 text-white'>
+                Install app
+              </button>
+            </form>
+          </dialog>
         </ErrorBoundary>
       </AntApp>
     </ConfigProvider>
-  )
+  );
 }
 
 export default AuthApp

vite.config.js

@@ -15,6 +15,7 @@ const buildDatePlugin = () => {
 const manifestForPlugIn = {
   registerType: 'prompt',
   // includeAssests: ['/src/assets/logo-gh.png'],
+  // registerType: 'autoUpdate',
   workbox: {
     globPatterns: ['**/*.{js,css,html,ico,png,svg,woff2}'],
   },
@@ -29,23 +30,24 @@ const manifestForPlugIn = {
       },
       {
         src: '/s-launchericon-192-192.png',
-        sizes:'192x192',
-        type:'image/png',
+        sizes: '192x192',
+        type: 'image/png',
       },
       {
         src: '/s-launchericon-144-144.png',
-        sizes:'144x144',
-        type:'image/png',
+        sizes: '144x144',
+        type: 'image/png',
       },
       {
         src: '/s-launchericon-512-512.png',
-        sizes:'512x512',
-        type:'image/png',
+        sizes: '512x512',
+        type: 'image/png',
       },
     ],
     theme_color: '#171717',
     background_color: '#ccd5ae',
     display: 'standalone',
+    display_override: ['window-controls-overlay'],
     scope: '/',
     start_url: '.',
     orientation: 'portrait',
@@ -63,6 +65,8 @@ export default defineConfig({
     },
   },
   build: {
+    // outDir: 'distTTT',
+    emptyOutDir: true,
     sourcemap: true,
     manifest: true,
     chunkSizeWarningLimit: 555,