feat(frontend): add installable PWA support and refresh app icons (#195)

vite-frontend/index.html

@@ -2,7 +2,12 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/png" href="/pwa-192x192.png" />
+    <meta name="theme-color" content="#2563eb" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+    <meta name="apple-mobile-web-app-title" content="FLVX" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     
     <title>FLVX</title>
     <script>

vite-frontend/package.json

@@ -78,6 +78,7 @@
     "prettier": "3.5.3",
     "typescript": "5.6.3",
     "vite": "npm:rolldown-vite@^7.3.1",
+    "vite-plugin-pwa": "^1.1.0",
     "vite-tsconfig-paths": "^6.0.5"
   }
 }

vite-frontend/src/main.tsx

@@ -1,10 +1,13 @@
 import ReactDOM from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
+import { registerSW } from "virtual:pwa-register";
 
 import App from "./App.tsx";
 import { Provider } from "./provider.tsx";
 import "@/styles/globals.css";
 
+registerSW({ immediate: true });
+
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <BrowserRouter>
     <Provider>

vite-frontend/src/vite-env.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="vite/client" />
+/// <reference types="vite-plugin-pwa/client" />
 
 interface ImportMetaEnv {
   readonly VITE_APP_VERSION?: string;

vite-frontend/vite.config.ts

@@ -2,9 +2,50 @@ import path from "path";
 
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import { VitePWA } from "vite-plugin-pwa";
 
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    VitePWA({
+      registerType: "autoUpdate",
+      injectRegister: "auto",
+      includeAssets: ["favicon.ico", "apple-touch-icon.png"],
+      manifest: {
+        name: "FLVX",
+        short_name: "FLVX",
+        description: "FLVX forwarding management panel",
+        theme_color: "#2563eb",
+        background_color: "#f6f7fb",
+        display: "standalone",
+        start_url: "/",
+        scope: "/",
+        icons: [
+          {
+            src: "pwa-192x192.png",
+            sizes: "192x192",
+            type: "image/png",
+          },
+          {
+            src: "pwa-512x512.png",
+            sizes: "512x512",
+            type: "image/png",
+          },
+          {
+            src: "pwa-maskable-512x512.png",
+            sizes: "512x512",
+            type: "image/png",
+            purpose: "maskable",
+          },
+        ],
+      },
+      workbox: {
+        navigateFallback: "/index.html",
+        cleanupOutdatedCaches: true,
+        maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
+      },
+    }),
+  ],
   base: "/",
   resolve: {
     alias: {