fix: pwa cache

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
+}