werewolf(pwa): 离线 PWA — 自定义 SW 预缓存 + 全屏进度条，牌图 21M→2.8M

- vite-plugin-pwa(injectManifest)自定义 SW：install 逐个抓取并向页面广播进度，
  cache-first 服务，导航离线回退 index.html，缓存版本随清单哈希自动淘汰旧缓存
- 全屏 modal 进度条（src/pwa.ts），反映首屏预缓存真实下载进度
- 牌图 mozjpeg 压缩 + 限长边 900px，每张 ≤200K（21.2MB→2.8MB）
- 生成 PWA 图标 + manifest + apple-touch meta，index.html 接入
- 新增脚本：npm run gen:icons / compress:images

apps/werewolf/frontend/vite.config.ts

@@ -1,8 +1,46 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import { VitePWA } from 'vite-plugin-pwa'
 
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    VitePWA({
+      // 自定义 SW：install 时逐个抓取资源并向页面广播进度（驱动首屏进度条）
+      strategies: 'injectManifest',
+      srcDir: 'src',
+      filename: 'sw.ts',
+      injectRegister: false, // 注册由 src/pwa.ts 手动处理，避免插件的自动重载
+      includeAssets: ['favicon-48x48.png', 'apple-touch-icon-180x180.png'],
+      manifest: {
+        name: '狼人杀发牌器',
+        short_name: '狼人杀',
+        description: '离线可用的狼人杀发牌器',
+        lang: 'zh-CN',
+        theme_color: '#1a1a2e',
+        background_color: '#1a1a2e',
+        display: 'standalone',
+        orientation: 'portrait',
+        start_url: '/',
+        scope: '/',
+        icons: [
+          { src: 'pwa-192x192.png', sizes: '192x192', type: 'image/png' },
+          { src: 'pwa-512x512.png', sizes: '512x512', type: 'image/png' },
+          {
+            src: 'maskable-icon-512x512.png',
+            sizes: '512x512',
+            type: 'image/png',
+            purpose: 'maskable',
+          },
+        ],
+      },
+      injectManifest: {
+        // 预缓存应用外壳 + 全部牌图，保证彻底断网也能发牌
+        globPatterns: ['**/*.{js,css,html,ico,png,svg,jpg,JPG,webmanifest}'],
+        maximumFileSizeToCacheInBytes: 1024 * 1024,
+      },
+    }),
+  ],
   build: {
     target: 'es2020',
   },