fix(plugin): 🧩 修复 pwa 插件不生效问题

.env.development

@@ -7,8 +7,6 @@ VITE_PUBLIC_PATH = /
 # 打包时是否删除 console
 VITE_DROP_CONSOLE = true
 
-# 是否开启 VitePWA
-VITE_PWA = false
 
 # 开发环境接口地址
 VITE_API_URL = /api

.env.production

@@ -14,8 +14,6 @@ VITE_DELETE_COMPRESS_ORIGIN_FILE = false
 # 打包时是否删除 console
 VITE_DROP_CONSOLE = true
 
-# 是否开启 VitePWA
-VITE_PWA = true
 
 # 线上环境接口地址
 VITE_API_URL = "https://mock.mengxuegu.com/mock/629d727e6163854a32e8307e"

.env.test

@@ -14,8 +14,6 @@ VITE_DELETE_COMPRESS_ORIGIN_FILE = false
 # 打包时是否删除 console
 VITE_DROP_CONSOLE = true
 
-# 是否开启 VitePWA
-VITE_PWA = false
 
 # 测试环境接口地址
 VITE_API_URL = "https://mock.mengxuegu.com/mock/629d727e6163854a32e8307e"

build/index.ts

@@ -12,7 +12,7 @@ import VueDevTools from 'vite-plugin-vue-devtools'
 import { setupAtuoComponent, setupAtuoImport, setupCompression, setupCreateSvgIcon, setupPrintBuildInfo, setupVitePWA, setupWebUpdateNotification } from './plugins'
 
 export function setupVitePlugins(viteEnv: ViteEnv): (PluginOption | PluginOption[])[] {
-  const { VITE_APP_TITLE, VITE_REPORT, VITE_PWA, VITE_INSPECT } = viteEnv
+  const { VITE_APP_TITLE, VITE_REPORT, VITE_INSPECT } = viteEnv
   return [
     vue(),
     // vue 可以使用 jsx/tsx 语法
@@ -41,7 +41,7 @@ export function setupVitePlugins(viteEnv: ViteEnv): (PluginOption | PluginOption
     }),
     setupCreateSvgIcon(),
     // vitePWA
-    VITE_PWA && setupVitePWA(viteEnv),
+    setupVitePWA(viteEnv),
     // 是否生成包预览，分析依赖包大小做优化处理
     VITE_REPORT && (visualizer({ gzipSize: true, brotliSize: true }) as PluginOption),
   ]

build/plugins/pwa.ts

@@ -1,32 +1,74 @@
+import { join } from 'node:path'
 import { VitePWA } from 'vite-plugin-pwa'
 import type { PluginOption } from 'vite'
+import fg from 'fast-glob'
 
 export function setupVitePWA(viteEnv: ViteEnv): PluginOption | PluginOption[] {
-  const { VITE_APP_TITLE } = viteEnv
+  const { VITE_APP_TITLE: NAME } = viteEnv
   return VitePWA({
+    strategies: 'injectManifest',
+    srcDir: 'public',
+    filename: 'sw.js',
     registerType: 'autoUpdate',
     manifest: {
-      name: VITE_APP_TITLE,
-      short_name: VITE_APP_TITLE,
-      theme_color: '#ffffff',
+      name: NAME,
+      short_name: NAME,
+      theme_color: '#ecf5ff',
       icons: [
         {
-          src: '/logo.png',
+          src: '/logos/logo_512.png',
+          types: 'img/png',
+          sizes: '512x512',
+          purpose: 'any',
+        },
+        {
+          src: '/logos/logo_256.png',
+          types: 'img/png',
+          sizes: '256x256',
+          purpose: 'maskable',
+        },
+        {
+          src: '/logos/logo_192.png',
+          types: 'img/png',
           sizes: '192x192',
-          type: 'image/png',
+          purpose: 'maskable',
         },
         {
-          src: '/logo.png',
-          sizes: '512x512',
-          type: 'image/png',
+          src: '/logos/logo_144.png',
+          types: 'img/png',
+          sizes: '144x144',
+          purpose: 'maskable',
         },
         {
-          src: '/logo.png',
-          sizes: '512x512',
-          type: 'image/png',
-          purpose: 'any maskable',
+          src: '/logos/logo_128.png',
+          types: 'img/png',
+          sizes: '128x128',
+          purpose: 'maskable',
+        },
+        {
+          src: '/logos/logo_72.png',
+          types: 'img/png',
+          sizes: '72x72',
+          purpose: 'maskable',
+        },
+        {
+          src: '/logos/logo_48.png',
+          types: 'img/png',
+          sizes: '48x48',
+          purpose: 'maskable',
         },
       ],
     },
+    integration: {
+      configureOptions(viteConfig, options) {
+        if (viteConfig.command === 'build')
+          options.includeAssets = fg.sync('**/*.*', { cwd: join(process.cwd(), 'public'), onlyFiles: true })
+      },
+    },
+    devOptions: {
+      enabled: process.env.PWA_DEV === 'true',
+      type: 'module',
+      navigateFallback: 'index.html',
+    },
   })
 }

package.json

@@ -22,6 +22,7 @@
   },
   "scripts": {
     "dev": "vite",
+    "dev-pwa": "PWA_DEV=true vite",
     "build": "vue-tsc && vite build",
     "build:dev": "vue-tsc && vite build --mode development",
     "build:test": "vue-tsc && vite build --mode test",
@@ -51,6 +52,7 @@
     "echarts": "^5.4.3",
     "echarts-liquidfill": "^3.1.0",
     "element-plus": "^2.4.1",
+    "fast-glob": "^3.3.1",
     "md5": "^2.3.0",
     "nprogress": "^0.2.0",
     "pinia": "^2.1.7",

public/sw.js

@@ -0,0 +1,48 @@
+importScripts('https://cdn.jsdelivr.net/npm/workbox-cdn/workbox/workbox-sw.js')
+
+self.addEventListener('install', () => {
+  self.skipWaiting()
+})
+
+self.addEventListener('activate', () => {
+  self.clients.claim()
+})
+
+// Navigation route are handled by network first strategy
+workbox.routing.registerRoute(
+  ({ request }) => request.mode === 'navigate',
+  new workbox.strategies.NetworkFirst({ cacheName: 'navigation' })
+)
+
+// CSS are handled by a Stale While Revalidate strategy
+workbox.routing.registerRoute(
+  ({ request }) => request.destination === 'style',
+  new workbox.strategies.StaleWhileRevalidate({
+    cacheName: 'assets',
+    plugins: [
+      // Ensure that only requests that result in a 200 status are cached
+      new workbox.cacheableResponse.CacheableResponse({
+        statuses: [200]
+      })
+    ]
+  })
+)
+
+// Images are handled with a Cache First strategy
+workbox.routing.registerRoute(
+  ({ request }) => request.destination === 'image',
+  new workbox.strategies.CacheFirst({
+    cacheName: 'images',
+    plugins: [
+      // Ensure that only requests that result in a 200 status are cached
+      new workbox.cacheableResponse.CacheableResponse({
+        statuses: [200]
+      }),
+      // Don't cache more than 50 items, and expire them after 30 days
+      new workbox.expiration.CacheExpiration('images', {
+        maxEntries: 50,
+        maxAgeSeconds: 60 * 60 * 24 * 30 // 30 Days
+      })
+    ]
+  })
+)

src/hooks/useDarkAnimate.ts

@@ -7,7 +7,6 @@ const isAppearanceTransition = document.startViewTransition
 && !window.matchMedia('(prefers-reduced-motion: reduce)').matches
 
 export function toggleDarkAnimate(event?: MouseEvent) {
-  console.log('[ event ]-10', event)
   if (!isAppearanceTransition || !event) {
     toggleDark()
     return

src/types/global.d.ts

@@ -49,7 +49,6 @@ declare interface ViteEnv {
   VITE_COMPRESS_ALGORITHM: 'gzip' | 'brotli' | 'gzip,brotli' | 'none'
   VITE_DELETE_COMPRESS_ORIGIN_FILE: boolean
   VITE_DROP_CONSOLE: boolean
-  VITE_PWA: boolean
   VITE_PUBLIC_PATH: string
   VITE_API_URL: string
   VITE_PROXY: [string, string][]

tsconfig.json

@@ -28,6 +28,6 @@
     "build/**/*.ts",
     "build/**/*.d.ts",
     "vite.config.ts"
-  ],
+ ],
   "exclude": ["node_modules", "dist", "**/*.js"]
 }