fix: pwa cache

package.json

@@ -1,7 +1,7 @@
 {
   "name": "nazha-dashboard-vite",
   "private": true,
-  "version": "0.0.0",
+  "version": "1.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -45,7 +45,7 @@
   "devDependencies": {
     "@eslint/js": "^9.16.0",
     "@types/node": "^22.10.1",
-    "@types/react": "^18.3.12",
+    "@types/react": "^18.3.13",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react-swc": "^3.7.2",
     "autoprefixer": "^10.4.20",

src/App.tsx

@@ -6,6 +6,7 @@ import Server from "./pages/Server";
 import ServerDetail from "./pages/ServerDetail";
 import NotFound from "./pages/NotFound";
 import ErrorPage from "./pages/ErrorPage";
+import ReloadPrompt from "./components/ReloadPrompt";
 
 const App: React.FC = () => {
   return (
@@ -20,6 +21,7 @@ const App: React.FC = () => {
             <Route path="*" element={<NotFound />} />
           </Routes>
           <Footer />
+          <ReloadPrompt />
         </main>
       </div>
     </Router>

src/components/ReloadPrompt.tsx

@@ -0,0 +1,52 @@
+import { useRegisterSW } from 'virtual:pwa-register/react';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'sonner';
+
+function ReloadPrompt() {
+  const { t } = useTranslation();
+
+  const {
+    needRefresh: [needRefresh, setNeedRefresh],
+    updateServiceWorker,
+  } = useRegisterSW({
+    onRegisteredSW(swUrl) {
+      console.log(`SW Registered: ${swUrl} (Version: ${import.meta.env.VITE_APP_VERSION})`);
+    },
+    onRegisterError(error) {
+      console.log('SW registration error', error);
+    },
+    onOfflineReady() {
+      toast.success(t('pwa.offlineReady'));
+    },
+  });
+
+  const close = () => {
+    setNeedRefresh(false);
+  };
+
+  const update = () => {
+    updateServiceWorker(true);
+  };
+
+  if (!needRefresh) {
+    return null;
+  }
+
+
+
+  toast.message(
+    `${t('pwa.newContent')} (${import.meta.env.VITE_APP_VERSION})`, 
+    {
+      action: {
+        label: t('pwa.reload'),
+        onClick: () => update(),
+      },
+      onDismiss: close,
+      duration: Infinity,
+    }
+  );
+
+  return null;
+}
+
+export default ReloadPrompt;

src/locales/en/translation.json

@@ -95,5 +95,10 @@
     "noData": "No server monitor data",
     "avgDelay": "Latency",
     "monitorCount": "Services"
+  },
+  "pwa": {
+    "offlineReady": "App ready to work offline",
+    "newContent": "New content available",
+    "reload": "Update"
   }
 }

src/locales/zh-CN/translation.json

@@ -95,5 +95,10 @@
     "noData": "没有服务器监控数据",
     "avgDelay": "延迟",
     "monitorCount": "个监控服务"
+  },
+  "pwa": {
+    "offlineReady": "应用可以离线使用了",
+    "newContent": "发现新版本",
+    "reload": "更新"
   }
 }

src/vite-env.d.ts

@@ -1 +1,22 @@
 /// <reference types="vite/client" />
+
+declare module 'virtual:pwa-register/react' {
+  import type { Dispatch, SetStateAction } from 'react'
+
+  export interface RegisterSWOptions {
+    immediate?: boolean
+    onNeedRefresh?: () => void
+    onOfflineReady?: () => void
+    onRegistered?: (registration: ServiceWorkerRegistration | undefined) => void
+    onRegisteredSW?: (swScriptUrl: string, registration: ServiceWorkerRegistration | undefined) => void
+    onRegisterError?: (error) => void
+  }
+
+  export interface RegisterSWHook {
+    needRefresh: [boolean, Dispatch<SetStateAction<boolean>>]
+    offlineReady: [boolean, Dispatch<SetStateAction<boolean>>]
+    updateServiceWorker: (reloadPage?: boolean) => Promise<void>
+  }
+
+  export function useRegisterSW(options?: RegisterSWOptions): RegisterSWHook
+}

vite.config.ts

@@ -19,6 +19,7 @@ export default defineConfig({
   base: "/",
   define: {
     "import.meta.env.VITE_GIT_HASH": JSON.stringify(getGitHash()),
+    "import.meta.env.VITE_APP_VERSION": JSON.stringify(process.env.npm_package_version || "1.0.0"),
   },
   plugins: [
     react(),
@@ -50,8 +51,58 @@ export default defineConfig({
         ],
       },
       workbox: {
-        navigateFallbackDenylist: [/^\/dashboard/],
+        clientsClaim: true,
+        skipWaiting: true,
+        cleanupOutdatedCaches: true,
+        runtimeCaching: [
+          {
+            urlPattern: /^https:\/\/fonts\.googleapis\.com\/.*/i,
+            handler: 'CacheFirst',
+            options: {
+              cacheName: 'google-fonts-cache',
+              expiration: {
+                maxEntries: 10,
+                maxAgeSeconds: 60 * 60 * 24 * 365 // <== 365 days
+              },
+              cacheableResponse: {
+                statuses: [0, 200]
+              }
+            }
+          },
+          {
+            urlPattern: /^https:\/\/fonts\.gstatic\.com\/.*/i,
+            handler: 'CacheFirst',
+            options: {
+              cacheName: 'gstatic-fonts-cache',
+              expiration: {
+                maxEntries: 10,
+                maxAgeSeconds: 60 * 60 * 24 * 365 // <== 365 days
+              },
+              cacheableResponse: {
+                statuses: [0, 200]
+              }
+            }
+          },
+          {
+            urlPattern: /^https:\/\/api\.nezha\.dev\/.*/i,
+            handler: 'NetworkFirst',
+            options: {
+              cacheName: 'api-cache',
+              expiration: {
+                maxEntries: 100,
+                maxAgeSeconds: 60 * 5 // <== 5 minutes
+              },
+              cacheableResponse: {
+                statuses: [0, 200]
+              }
+            }
+          }
+        ]
       },
+      devOptions: {
+        enabled: true,
+        type: 'module'
+      }
     }),
   ],
   resolve: {