From 9073fa6429fc308f3fc840dc687303f1c71d73d9 Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Thu, 5 Dec 2024 10:20:45 +0800
Subject: [PATCH] fix: pwa cache

---
 bun.lockb                          | Bin 297564 -> 297959 bytes
 package.json                       |   4 +--
 src/App.tsx                        |   2 ++
 src/components/ReloadPrompt.tsx    |  52 ++++++++++++++++++++++++++++
 src/locales/en/translation.json    |   5 +++
 src/locales/zh-CN/translation.json |   5 +++
 src/vite-env.d.ts                  |  21 ++++++++++++
 vite.config.ts                     |  53 ++++++++++++++++++++++++++++-
 8 files changed, 139 insertions(+), 3 deletions(-)
 create mode 100644 src/components/ReloadPrompt.tsx

diff --git a/bun.lockb b/bun.lockb
index be521dc4bafbb9a3538b7d69a886191a0296b892..c00601c001efc3dffc1c287443ff02719752280a 100755
GIT binary patch
delta 1343
zcmZA1Z%mC*90%}o&y(uj6t_QDsdOt!>6ZK%sg$+(GcPc+yuh+q>xCCuFEq?m8S&&#
z-LA8csHv5dy0{x_DJo&Byg*z<W=$_HTH0)e@43&<8)x_Q{Lbh1d(Lytb8gpF9XKfh
zFD55gUr!AbyW65uXJ-bM=O0Ts@u()h%kKWH9(UR|S_|*ws$NXCXO+28Jf^p!INM}Q
zz<4fWCl=xAhwFr+$CPFAT^O>&SQ5MQMW@Bpp-+bgBCptP++JqeZt>MM+eXK-bZ$r3
zc#+AUBbDLJm=4!WN9B*4|HwJ&r#m^5eKzHTLy21#-~NQ}J6!fCGOPH<gWVO=qU*@&
z?k1zp&%~nq9TV27GIM8ld|Jq4+R?0#+O3VTyAHV5*KJx{P-?H`q4vFet8VaKGheyZ
zX0`-7U2FN4a&ghfQ~e5h<vJJ(?&o5^ssxFg9-a^i`29y~GFgHexlBcr^zfj}5NT+o
z{}}PIIUZtVWb&1zkewux!xdr#Q&=Y{b&66xNKKKQCi8{Ol9iL`Vaw5FJ40qboazzA
z&cfuQaVG4cqTzX}!+Eh!+I#`*0--<fh$!sEno6}}W|fqhhtw&uDzf>oa55X25mtmQ
z*HKL-&;1y>Y<99B#HT&N*d?-Hj8)A7m>`tz_na_3#+s_AzJ^i@Fup`~nM|J60QM^P
ze1$9w@gVL0D%nEVOYC31hg!05#9!pmqFp14K>Ss+09FUYhee{tiw?P_BsoT_r}`+w
z?`e((DmTNPlij4cXjmuAgli*N4B|SN+*cFb8;dxU*4|8Yi(%7<(X6b6a0y1k^pIO*
zaj-XZb1O{V6OaCutc~iH!rqa!lgWQ-7ug-UHxX7v&*=2j?ZKBF_z{KjVGg=E3Go<A
zPI8ybf_R+l9$7L>U_v?ZeX{I+1ZWW>!qCU##Hv1iS1*4X)}g06zxVMRJzwK3Rt)i1
zhRq{damJJ^j?o{)@G1I$bHgwn4>h?lxtwnh{m>Ntpw(A6lfUqQdf}@ot8^10Q&qwY
z-zv1demf`fR3+Q<t!}!mDmsJtyq4LfI$J7~`@h6cxmU0#Y*ozSP=n$l^3Hhu`U}Sm
B<-q^|

delta 1178
zcmXZaNla5w6b9h)ZUK1}Do|Sy6hs+BO06su6e4OcB(B(~D-(AbHO8=Th><Z2wx|qp
zBTfxbQ3Oq?_(<3YQjqAP7#2p+MqLmvQA3OiL)8EFos-`5-0z%shu6-_l)0{yYwr98
z|Df)z(pq-(?s;K9dg90z`$*usJ8Rf~Hf^b5Hvjya))-PT-F_%j<ctN*l{@te%vTcC
z_64V%yPd(L!nr`FD^jWjgU2J)&NvO_U2(yl$X;h`G&f2Tw8mf3p@{=BUK5GNDNW=R
z%UZjLF$PLRMT_;=m{6M#g`{g-lsW$XGec1wN@^L0tQ!~hvVvHJMD@%T<XhPq*wm4W
z*c#c?bY9M2iJC<&HF0SLO265f+2Uay3>7VGI`VB%A!>!GZLAoh>I{fB?!&vGue{zB
zwglJ(^HtjDDq|wBUY>c0Gc}ntYUk1_l+xKc*pgt?80s9IY{|$kVyNh1OF`Zo6{72G
zcFetO-E6BdZ!^tClF<R^kjWD`Q#beD;L;k*r*Kzw=N`6H<kNirn`~=gZ*hP19&WLv
zAzx5GBjPq&I`SWEcVPI?I*dG(5ZTDjjq5RU$$&c3NAB<C{!El!v)$wN4X`1Yy2^dF
zEaZ1#PJBP$XE!2G<+DHJzD=+t<SHJqWg`!pd(==rV-D~gKl~V`p2@{{&o;<?d9V*`
zPuMoY=GdO{v-z+Na}x@1-xk<s^r^juqE<;%fXOGIS|rGgF60rmXKaNqi3Qcd!)%@q
z5=4AhW=x7)Sw1O7^qp};#TX@qHYN7yvN9}Yt;J!pGkYQ0sh`Aj3L|7x&4@^<?G^IF
z3uezjud#no*m|@3mWl93uhmbNPA*pUj0)}2c6X7-?IFL{ysqCT2Yi<DzMnpeW)1sH
SoM<)vv{{}n%Ws!smj45w;Ih>K

diff --git a/package.json b/package.json
index 4cdca57..580812e 100644
--- a/package.json
+++ b/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",
diff --git a/src/App.tsx b/src/App.tsx
index ea1ed0b..e2abea1 100644
--- a/src/App.tsx
+++ b/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>
diff --git a/src/components/ReloadPrompt.tsx b/src/components/ReloadPrompt.tsx
new file mode 100644
index 0000000..a20c02d
--- /dev/null
+++ b/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;
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index 59b5ba5..9a893db 100644
--- a/src/locales/en/translation.json
+++ b/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"
   }
 }
diff --git a/src/locales/zh-CN/translation.json b/src/locales/zh-CN/translation.json
index 56416fc..38219eb 100644
--- a/src/locales/zh-CN/translation.json
+++ b/src/locales/zh-CN/translation.json
@@ -95,5 +95,10 @@
     "noData": "没有服务器监控数据",
     "avgDelay": "延迟",
     "monitorCount": "个监控服务"
+  },
+  "pwa": {
+    "offlineReady": "应用可以离线使用了",
+    "newContent": "发现新版本",
+    "reload": "更新"
   }
 }
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 11f02fe..71175a7 100644
--- a/src/vite-env.d.ts
+++ b/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
+}
diff --git a/vite.config.ts b/vite.config.ts
index baded3f..151c69d 100644
--- a/vite.config.ts
+++ b/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: {