Add PWA to web app (#1175)

* add PWA to web app

* Fix sw.js not registering and lint

* Change sw and manifest to live at root

* Revert "Change sw and manifest to live at root"

This reverts commit 4c27d924672772f2c6b0a0be30524bb478f7b1dd.

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,8 +11,17 @@ 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')),
                 favicon: normalizePath(path.resolve(__dirname, './assets/icons/favicon.ico')),
                 index: normalizePath(path.resolve(__dirname, './src/renderer/index.html')),
+                preview_full_screen_player: normalizePath(
+                    path.resolve(__dirname, './media/preview_full_screen_player.png'),
+                ),
             },
             output: {
                 assetFileNames: 'assets/[name].[ext]',
@@ -39,6 +49,72 @@ export default defineConfig({
             root: normalizePath(path.resolve(__dirname, './src/renderer')),
             web: true,
         }),
+        VitePWA({
+            devOptions: {
+                // The PWA will not be shown during development
+                enabled: false,
+            },
+            filename: 'assets/sw.js',
+            injectRegister: 'inline',
+            manifest: {
+                background_color: '#FFDCB5',
+                display: 'standalone',
+                icons: [
+                    {
+                        sizes: '32x32',
+                        src: '32x32.png',
+                        type: 'image/png',
+                    },
+                    {
+                        sizes: '64x64',
+                        src: '64x64.png',
+                        type: 'image/png',
+                    },
+                    {
+                        sizes: '128x128',
+                        src: '128x128.png',
+                        type: 'image/png',
+                    },
+                    {
+                        sizes: '256x256',
+                        src: '256x256.png',
+                        type: 'image/png',
+                    },
+                    {
+                        purpose: 'any',
+                        sizes: '512x512',
+                        src: '512x512.png',
+                        type: 'image/png',
+                    },
+                    {
+                        sizes: '1024x1024',
+                        src: '1024x1024.png',
+                        type: 'image/png',
+                    },
+                ],
+                name: 'Feishin',
+                orientation: 'portrait',
+                screenshots: [
+                    {
+                        form_factor: 'wide',
+                        label: 'Full screen player showing music player and lyrics',
+                        sizes: '1440x900',
+                        src: 'preview_full_screen_player.png',
+                        type: 'image/png',
+                    },
+                ],
+                short_name: 'Feishin',
+                start_url: '/',
+                theme_color: '#1E003D',
+            },
+            manifestFilename: 'assets/manifest.webmanifest',
+            outDir: path.resolve(__dirname, './out/web/'),
+            registerType: 'autoUpdate',
+            scope: '/assets/',
+            workbox: {
+                maximumFileSizeToCacheInBytes: 1000000 * 5, // 5 MB
+            },
+        }),
     ],
     resolve: {
         alias: {