refactor(pwa): use generateSW strategy

Author: VChet

package.json

@@ -31,7 +31,8 @@
     "vite": "^7.3.1",
     "vite-plugin-pwa": "^1.2.0",
     "vue": "^3.5.29",
-    "vue-dompurify-html": "^5.3.0"
+    "vue-dompurify-html": "^5.3.0",
+    "workbox-window": "^7.4.0"
   },
   "devDependencies": {
     "@antfu/eslint-config": "7.4.3",
@@ -55,13 +56,7 @@
     "type-fest": "^5.4.4",
     "typescript": "^5.9.3",
     "vue-router": "^5.0.3",
-    "vue-tsc": "^3.2.5",
-    "workbox-build": "^7.4.0",
-    "workbox-core": "^7.4.0",
-    "workbox-precaching": "^7.4.0",
-    "workbox-routing": "^7.4.0",
-    "workbox-strategies": "^7.4.0",
-    "workbox-window": "^7.4.0"
+    "vue-tsc": "^3.2.5"
   },
   "pnpm": {
     "overrides": {

pnpm-lock.yaml

@@ -18,12 +18,28 @@ const manifest: Partial<ManifestOptions> = {
 
 const pwaOptions: Partial<VitePWAOptions> = {
   base: "/",
-  strategies: "injectManifest",
-  srcDir: "src",
-  filename: "sw.ts",
+  strategies: "generateSW",
+  registerType: "autoUpdate",
   includeAssets: ["favicon.ico", "robots.txt", "apple-touch-icon.png"],
   manifest,
-  workbox: { sourcemap: true }
+  workbox: {
+    sourcemap: true,
+    cleanupOutdatedCaches: true,
+    navigateFallback: "/index.html",
+    runtimeCaching: [
+      {
+        urlPattern: /\.(?:png|jpe?g|svg|webp|woff2)$/,
+        handler: "CacheFirst",
+        options: {
+          cacheName: "asset-cache",
+          expiration: {
+            maxEntries: 60,
+            maxAgeSeconds: 30 * 24 * 60 * 60 // 30 days
+          }
+        }
+      }
+    ]
+  }
 };
 
 export default pwaOptions;