feat: init pwa

package.json

@@ -38,7 +38,8 @@
     "recharts": "^2.13.3",
     "sonner": "^1.7.0",
     "tailwind-merge": "^2.5.5",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "vite-plugin-pwa": "^0.21.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.16.0",

src/pages/Server.tsx

@@ -57,10 +57,10 @@ export default function Servers() {
   if (!connected) {
     return (
       <div className="flex flex-col items-center min-h-96 justify-center ">
-        <p className="font-semibold flex items-center gap-2 text-sm">
+        <div className="font-semibold flex items-center gap-2 text-sm">
           <Loader visible={true} />
           {t("info.websocketConnecting")}
-        </p>
+        </div>
       </div>
     );
   }

vite.config.ts

@@ -1,10 +1,41 @@
 import path from "path";
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
+import { VitePWA } from "vite-plugin-pwa";
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    VitePWA({
+      registerType: "autoUpdate",
+      includeAssets: ["favicon.ico", "apple-touch-icon.png", "masked-icon.svg"],
+      manifest: {
+        name: "哪吒面板",
+        short_name: "哪吒",
+        description: "哪吒监控面板",
+        theme_color: "#ffffff",
+        icons: [
+          {
+            src: "pwa-192x192.png",
+            sizes: "192x192",
+            type: "image/png"
+          },
+          {
+            src: "pwa-512x512.png",
+            sizes: "512x512",
+            type: "image/png"
+          },
+          {
+            src: "pwa-512x512.png",
+            sizes: "512x512",
+            type: "image/png",
+            purpose: "any maskable"
+          }
+        ]
+      }
+    })
+  ],
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "./src"),