feat: 完整实现PWA功能

frontend/index.html

@@ -6,7 +6,7 @@
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-    <link rel="manifest" href="/manifest.webmanifest" />
+    <!-- 移除了 manifest 链接，插件会自动注入 -->
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>XUGOU - 轻量化监控平台</title>
   </head>

frontend/package.json

@@ -61,6 +61,7 @@
     "globals": "^13.24.0",
     "tw-animate-css": "^1.3.0",
     "typescript": "~5.1.6",
-    "vite": "^6.0.0"
+    "vite": "^6.0.0",
+    "vite-plugin-pwa": "^0.20.1"
   }
 }

frontend/public/sw.js

@@ -1,11 +1,20 @@
-self.addEventListener("install", (event) => {
+// 这个文件可以保留为空，或者删除。
+// vite-plugin-pwa 会在构建时自动生成新的 sw.js 文件到输出目录（dist）。
+// 开发环境中，为了避免旧的 Service Worker 缓存导致问题，我们最好确保它被正确地注销。
+// 如果您在开发时遇到缓存问题，可以取消下面代码的注释来强制注销。
+
+/*
+self.addEventListener('install', (e) => {
   self.skipWaiting();
 });
 
-self.addEventListener("activate", (event) => {
-  self.clients.claim();
+self.addEventListener('activate', (e) => {
+  e.waitUntil(
+    self.registration.unregister().then(() => {
+      return self.clients.matchAll();
+    }).then(clients => {
+      clients.forEach(client => client.navigate(client.url));
+    })
+  );
 });
-
-self.addEventListener("fetch", (event) => {
-  event.respondWith(fetch(event.request));
-});
+*/

frontend/src/main.tsx

@@ -8,18 +8,8 @@ import "./styles/global.css";
 import "./i18n/config";
 import router from "./router";
 
-if ("serviceWorker" in navigator) {
-  window.addEventListener("load", () => {
-    navigator.serviceWorker
-      .register("/sw.js")
-      .then((registration) => {
-        console.log("Service Worker 注册成功:", registration);
-      })
-      .catch((registrationError) => {
-        console.log("Service Worker 注册失败:", registrationError);
-      });
-  });
-}
+// 删除了手动的 Service Worker 注册代码
+// vite-plugin-pwa 会自动处理
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>

frontend/vite.config.ts

@@ -2,10 +2,54 @@ import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import path from "path";
 import tailwindcss from "@tailwindcss/vite";
+import { VitePWA } from 'vite-plugin-pwa'; // 导入 PWA 插件
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react(), tailwindcss()],
+  plugins: [
+    react(),
+    tailwindcss(),
+    // 添加 PWA 插件配置
+    VitePWA({
+      registerType: 'autoUpdate', // 自动更新 Service Worker
+      injectRegister: 'auto', // 自动注入注册 Service Worker 的代码
+      workbox: {
+        // 配置需要缓存的文件类型
+        globPatterns: ['**/*.{js,css,html,ico,png,svg,webmanifest}']
+      },
+      // 包含在 public 目录中的其他需要缓存的资源
+      includeAssets: ['favicon.svg', 'apple-touch-icon.png'],
+      // PWA 应用清单配置
+      manifest: {
+        name: 'XUGOU',
+        short_name: 'XUGOU',
+        description: 'XUGOU 是一个基于 CloudFlare 的轻量化系统监控平台，提供系统监控和状态页面功能。',
+        theme_color: '#4F46E5',
+        background_color: '#ffffff',
+        display: 'standalone',
+        scope: '/',
+        start_url: '/',
+        icons: [
+          {
+            src: 'android-chrome-192x192.png',
+            sizes: '192x192',
+            type: 'image/png'
+          },
+          {
+            src: 'android-chrome-512x512.png',
+            sizes: '512x512',
+            type: 'image/png'
+          },
+          {
+            src: 'android-chrome-512x512.png',
+            sizes: '512x512',
+            type: 'image/png',
+            purpose: 'maskable' // 添加 'maskable' 图标, 优化 Android 上的显示效果
+          }
+        ]
+      }
+    })
+  ],
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "./src"), // __dirname 指向 vite.config.ts 文件所在的目录