PWA

package.json

@@ -20,6 +20,7 @@
     "react-router-dom": "^6.21.1",
     "rxjs": "^7.8.1",
     "uuid": "^9.0.1",
+    "vite-plugin-pwa": "^0.19.6",
     "zustand": "^4.5.0"
   },
   "devDependencies": {

vite.config.js

@@ -1,28 +1,65 @@
-import { defineConfig } from 'vite'
+import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react'
+import react from '@vitejs/plugin-react';
-import WindiCSS from 'vite-plugin-windicss'
+import WindiCSS from 'vite-plugin-windicss';
+import { VitePWA } from 'vite-plugin-pwa';
 
 const buildDatePlugin = () => {
   return {
     transformIndexHtml(html) {
-      const dataString = new Date().toISOString()
+      const dataString = new Date().toISOString();
-      return html.replace(
+      return html.replace(/%BUILD_DATE%/, `${dataString}`);
-        /%BUILD_DATE%/,
-        `${dataString}`,
-      )
     },
-  }
+  };
-}
+};
-
+// PWA plugin
+const manifestForPlugIn = {
+  registerType: 'prompt',
+  // includeAssests: ['/src/assets/logo-gh.png'],
+  workbox: {
+    globPatterns: ['**/*.{js,css,html,ico,png,svg,woff2}'],
+  },
+  manifest: {
+    name: 'Sales CRM',
+    short_name: 'Sales CRM',
+    description: 'Haina travel global sales CRM system',
+    icons: [
+      {
+        src: '/favicon.ico',
+        sizes: '32x32',
+      },
+      {
+        src: '/s-launchericon-192-192.png',
+        sizes:'192x192',
+        type:'image/png',
+      },
+      {
+        src: '/s-launchericon-144-144.png',
+        sizes:'144x144',
+        type:'image/png',
+      },
+      {
+        src: '/s-launchericon-512-512.png',
+        sizes:'512x512',
+        type:'image/png',
+      },
+    ],
+    theme_color: '#171717',
+    background_color: '#ccd5ae',
+    display: 'standalone',
+    scope: '/',
+    start_url: '.',
+    orientation: 'portrait',
+  },
+};
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), WindiCSS(), buildDatePlugin()],
+  plugins: [react(), WindiCSS(), buildDatePlugin(), VitePWA(manifestForPlugIn)],
   server: {
-    host: "0.0.0.0",
+    host: '0.0.0.0',
   },
   resolve: {
     alias: {
-      "@": "/src",
+      '@': '/src',
     },
   },
   build: {
@@ -44,6 +81,6 @@ export default defineConfig({
     // }
   },
   terserOptions: {
-    maxWorkers: 4
+    maxWorkers: 4,
-  }
+  },
-})
+});