add PWA to web app

package.json

@@ -167,7 +167,8 @@
         "vite": "^6.3.6",
         "vite-plugin-conditional-import": "^0.1.7",
         "vite-plugin-dynamic-import": "^1.6.0",
-        "vite-plugin-ejs": "^1.7.0"
+        "vite-plugin-ejs": "^1.7.0",
+        "vite-plugin-pwa": "^1.0.3"
     },
     "pnpm": {
         "onlyBuiltDependencies": [

web.vite.config.ts

@@ -2,6 +2,7 @@ import react from '@vitejs/plugin-react';
 import path from 'path';
 import { defineConfig, normalizePath } from 'vite';
 import { ViteEjsPlugin } from 'vite-plugin-ejs';
+import { VitePWA } from 'vite-plugin-pwa';
 
 export default defineConfig({
     base: './',
@@ -10,6 +11,13 @@ export default defineConfig({
         outDir: path.resolve(__dirname, './out/web'),
         rollupOptions: {
             input: {
+                "32x32": normalizePath(path.resolve(__dirname, './assets/icons/32x32.png')),
+                "64x64": normalizePath(path.resolve(__dirname, './assets/icons/64x64.png')),
+                "128x128": normalizePath(path.resolve(__dirname, './assets/icons/128x128.png')),
+                "256x256": normalizePath(path.resolve(__dirname, './assets/icons/256x256.png')),
+                "512x512": normalizePath(path.resolve(__dirname, './assets/icons/512x512.png')),
+                "1024x1024": normalizePath(path.resolve(__dirname, './assets/icons/1024x1024.png')),
+                "preview_full_screen_player": normalizePath(path.resolve(__dirname, './media/preview_full_screen_player.png')),
                 favicon: normalizePath(path.resolve(__dirname, './assets/icons/favicon.ico')),
                 index: normalizePath(path.resolve(__dirname, './src/renderer/index.html')),
             },
@@ -39,6 +47,71 @@ export default defineConfig({
             root: normalizePath(path.resolve(__dirname, './src/renderer')),
             web: true,
         }),
+        VitePWA({
+            registerType: 'autoUpdate',
+            scope: "/",
+            devOptions: {
+                // The PWA will not be shown during development
+                enabled: false,
+            },
+            workbox: {
+                maximumFileSizeToCacheInBytes: 1000000 * 5 // 5 MB
+            },
+            outDir: path.resolve(__dirname, "./out/web/assets"),
+            injectRegister: "inline",
+            manifestFilename: "assets/manifest.webmanifest",
+            manifest: {
+                name: 'Feishin',
+                short_name: 'Feishin',
+                start_url: '/',
+                background_color: '#FFDCB5',
+                theme_color: '#1E003D',
+                icons: [
+                    {
+                        src: '32x32.png',
+                        sizes: '32x32',
+                        type: 'image/png',
+                    },
+                    {
+                        src: '64x64.png',
+                        sizes: '64x64',
+                        type: 'image/png',
+                    },
+                    {
+                        src: '128x128.png',
+                        sizes: '128x128',
+                        type: 'image/png',
+                    },
+                    {
+                        src: '256x256.png',
+                        sizes: '256x256',
+                        type: 'image/png',
+                    },
+                    {
+                        src: '512x512.png',
+                        sizes: '512x512',
+                        type: 'image/png',
+                        purpose: "any"
+                    },
+                    {
+                        src: '1024x1024.png',
+                        sizes: '1024x1024',
+                        type: 'image/png',
+                    },
+                ],
+                display: 'standalone',
+                orientation: 'portrait',
+                screenshots: [
+                    {
+                        src: 'preview_full_screen_player.png',
+                        sizes: '1440x900',
+                        type: 'image/png',
+                        form_factor: 'wide',
+                        label: 'Full screen player showing music player and lyrics',
+                    },
+                ],
+            },
+        }),
     ],
     resolve: {
         alias: {