优化 增强应用的离线支持功能

vite.config.js

@@ -1,106 +1,80 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import { VitePWA } from 'vite-plugin-pwa'
-
-// https://vitejs.dev/config/
-export default defineConfig(({ mode }) => {
-  const isPwaMode = mode === 'pwa'
-
-  const plugins = [vue()]
-
-  // 只在PWA模式下添加PWA插件
-  if (isPwaMode) {
-    plugins.push(
-      VitePWA({
-        registerType: 'autoUpdate',
-        devOptions: {
-          enabled: false,
-        },
-        manifest: {
-          name: '锤子便签',
-          short_name: '便签',
-          description: '锤子便签(重制版)',
-          theme_color: '#42b883',
-          start_url: '/',
-          display: 'standalone',
-          background_color: '#ffffff',
-          icons: [
-            {
-              src: 'icons/icon-192.png',
-              sizes: '192x192',
-              type: 'image/png',
-            },
-            {
-              src: 'icons/icon-512.png',
-              sizes: '512x512',
-              type: 'image/png',
-            },
-          ],
-        },
-        workbox: {
-          globPatterns: ['**/*.{js,css,html,wasm,png,jpg,jpeg,svg,ico}'],
-          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],
-                },
-              },
-            },
-          ],
-        },
-      })
-    )
-  }
-
-  return {
-    plugins,
-    resolve: {
-      alias: {
-        '@': '/src',
-      },
-    },
-    server: {
-      port: 3000,
-    },
-    build: {
-      outDir: isPwaMode ? 'dist/offline' : 'dist/standard',
-      minify: 'terser',
-      terserOptions: {
-        compress: {
-          drop_console: true,
-          drop_debugger: true,
-        },
-      },
-      rollupOptions: {
-        output: {
-          // 为CSS和JS文件添加哈希后缀
-          entryFileNames: 'assets/[name].[hash].js',
-          chunkFileNames: 'assets/[name].[hash].js',
-          assetFileNames: 'assets/[name].[hash].[ext]',
-        },
-      },
-    },
-  }
-})
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { VitePWA } from 'vite-plugin-pwa'
+
+// https://vitejs.dev/config/
+export default defineConfig(({ mode }) => {
+  const isPwaMode = mode === 'pwa'
+
+  const plugins = [vue()]
+
+  // 只在PWA模式下添加PWA插件
+  if (isPwaMode) {
+    plugins.push(
+      VitePWA({
+        strategies: 'injectManifest',
+        srcDir: 'src',
+        filename: 'sw.js',
+        registerType: 'autoUpdate',
+        devOptions: {
+          enabled: false,
+          type: 'module',
+        },
+        manifest: {
+          name: '锤子便签',
+          short_name: '便签',
+          description: '锤子便签(重制版)',
+          theme_color: '#42b883',
+          start_url: '/',
+          display: 'standalone',
+          background_color: '#ffffff',
+          icons: [
+            {
+              src: 'icons/icon-192.png',
+              sizes: '192x192',
+              type: 'image/png',
+            },
+            {
+              src: 'icons/icon-512.png',
+              sizes: '512x512',
+              type: 'image/png',
+            },
+          ],
+        },
+        injectManifest: {
+          globPatterns: ['**/*.{js,css,html,wasm,png,jpg,jpeg,svg,ico}'],
+        },
+      })
+    )
+  }
+
+  return {
+    plugins,
+    resolve: {
+      alias: {
+        '@': '/src',
+      },
+    },
+    server: {
+      port: 3000,
+    },
+    build: {
+      outDir: isPwaMode ? 'dist/offline' : 'dist/standard',
+      minify: 'terser',
+      terserOptions: {
+        compress: {
+          drop_console: true,
+          drop_debugger: true,
+        },
+      },
+      rollupOptions: {
+        output: {
+          // 为CSS和JS文件添加哈希后缀
+          entryFileNames: 'assets/[name].[hash].js',
+          chunkFileNames: 'assets/[name].[hash].js',
+          assetFileNames: 'assets/[name].[hash].[ext]',
+        },
+      },
+    },
+  }
+})