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
2026-05-25 18:44:46 +01:00
parent 1a62ec6658
commit bcf99ec454
47 changed files with 5755 additions and 21 deletions
@@ -2,8 +2,13 @@
 <html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover" />
    <meta name="theme-color" content="#1a1a2e" />
    <link rel="icon" type="image/png" href="/favicon-48x48.png" />
    <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="apple-mobile-web-app-title" content="狼人杀" />
    <title>狼人杀发牌器</title>
  </head>
  <body>
@@ -7,15 +7,19 @@
    "dev": "vite",
    "build": "vue-tsc -b && vite build",
    "preview": "vite preview",
-    "test": "vitest"
+    "test": "vitest",
    "gen:icons": "node scripts/gen-icons.mjs",
    "compress:images": "node scripts/compress-images.mjs"
  },
  "dependencies": {
    "vue": "^3.5.13"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.2.1",
    "sharp": "^0.34.5",
    "typescript": "~5.7.2",
    "vite": "^6.0.5",
    "vite-plugin-pwa": "^1.3.0",
    "vitest": "^2.1.8",
    "vue-tsc": "^2.2.0"
  }
@@ -0,0 +1,60 @@
 // 把 public/werewolf 下的牌图压到每张 <= 200KB（原地覆盖）。
 // 策略：最长边限 900px，mozjpeg 质量从高到低递减，直到达标。
 // 已经 <= 目标的文件跳过，避免重复编码反复掉质量。
 // 运行: npm run compress:images
 import sharp from 'sharp'
 import { readdir, stat, writeFile } from 'node:fs/promises'
 import { fileURLToPath } from 'node:url'
 import { dirname, resolve, join } from 'node:path'
 const here = dirname(fileURLToPath(import.meta.url))
 const root = resolve(here, '../public/werewolf')
 const TARGET = 200 * 1024
 const MAX_EDGE = 900
 const QUALITIES = [82, 76, 70, 64, 58, 52, 46]
 async function listJpgs(dir) {
  const out = []
  for (const name of await readdir(dir, { withFileTypes: true })) {
    const p = join(dir, name.name)
    if (name.isDirectory()) out.push(...(await listJpgs(p)))
    else if (/\.jpe?g$/i.test(name.name)) out.push(p)
  }
  return out
 }
 async function compress(file) {
  const before = (await stat(file)).size
  if (before <= TARGET) return { file, skipped: true, before }
  let chosen = null
  for (const quality of QUALITIES) {
    const buf = await sharp(file)
      .rotate() // 按 EXIF 摆正
      .resize({ width: MAX_EDGE, height: MAX_EDGE, fit: 'inside', withoutEnlargement: true })
      .jpeg({ quality, mozjpeg: true })
      .toBuffer()
    chosen = { buf, quality }
    if (buf.length <= TARGET) break
  }
  await writeFile(file, chosen.buf)
  return { file, before, after: chosen.buf.length, quality: chosen.quality }
 }
 const files = await listJpgs(root)
 let totalBefore = 0
 let totalAfter = 0
 for (const f of files) {
  const r = await compress(f)
  const rel = f.slice(root.length + 1)
  if (r.skipped) {
    totalBefore += r.before
    totalAfter += r.before
    console.log(`skip  ${rel}  (${(r.before / 1024) | 0}K)`)
  } else {
    totalBefore += r.before
    totalAfter += r.after
    console.log(`ok    ${rel}  ${(r.before / 1024) | 0}K -> ${(r.after / 1024) | 0}K  q${r.quality}`)
  }
 }
 console.log(`\n${files.length} files: ${(totalBefore / 1024 / 1024).toFixed(1)}MB -> ${(totalAfter / 1024 / 1024).toFixed(1)}MB`)
@@ -0,0 +1,46 @@
 // 从 public/werewolf/back.jpg 生成 PWA 图标。
 // 运行: npm run gen:icons
 import sharp from 'sharp'
 import { mkdir } from 'node:fs/promises'
 import { fileURLToPath } from 'node:url'
 import { dirname, resolve } from 'node:path'
 const here = dirname(fileURLToPath(import.meta.url))
 const pub = resolve(here, '../public')
 const src = resolve(pub, 'werewolf/back.jpg')
 // 卡背是竖图，狼头菱形大致在水平居中、垂直 ~46% 处。
 // 裁一个聚焦狼头 logo 的方形区域作为图标基底（按实际尺寸夹紧，避免越界）。
 const meta = await sharp(src).metadata()
 const SIDE = Math.min(meta.width, Math.round(meta.width * 0.82), meta.height)
 const left = Math.round(Math.max(0, Math.min(meta.width - SIDE, meta.width / 2 - SIDE / 2)))
 const top = Math.round(Math.max(0, Math.min(meta.height - SIDE, meta.height * 0.46 - SIDE / 2)))
 const square = await sharp(src)
  .extract({ left, top, width: SIDE, height: SIDE })
  .toBuffer()
 const RED = { r: 0xc0, g: 0x39, b: 0x2b, alpha: 1 } // 贴近卡面红，用于 maskable 安全区留白
 async function out(name, size, { maskable = false } = {}) {
  await mkdir(pub, { recursive: true })
  const target = resolve(pub, name)
  if (maskable) {
    // maskable: 内容缩到 ~80%，四周用卡红留白，保证安全区不被裁切
    const inner = Math.round(size * 0.8)
    const fg = await sharp(square).resize(inner, inner).toBuffer()
    await sharp({ create: { width: size, height: size, channels: 4, background: RED } })
      .composite([{ input: fg, gravity: 'center' }])
      .png()
      .toFile(target)
  } else {
    await sharp(square).resize(size, size).png().toFile(target)
  }
  console.log('wrote', name)
 }
 await out('pwa-192x192.png', 192)
 await out('pwa-512x512.png', 512)
 await out('maskable-icon-512x512.png', 512, { maskable: true })
 await out('apple-touch-icon-180x180.png', 180)
 await out('favicon-48x48.png', 48)
 console.log('done')
@@ -1,5 +1,7 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import './style.css'
 import { setupPWA } from './pwa'
 createApp(App).mount('#app')
 setupPWA()
@@ -0,0 +1,97 @@
 // PWA 客户端：注册 Service Worker，并在首次预缓存（或版本更新）时
 // 显示一个全屏 modal 进度条，反映离线资源的真实下载进度。
 type SWMessage =
  | { type: 'precache-start'; total: number }
  | { type: 'precache-progress'; loaded: number; total: number }
  | { type: 'precache-done'; total: number }
 let overlay: HTMLDivElement | null = null
 let barFill: HTMLDivElement | null = null
 let label: HTMLDivElement | null = null
 function injectStyle(): void {
  if (document.getElementById('pwa-precache-style')) return
  const style = document.createElement('style')
  style.id = 'pwa-precache-style'
  style.textContent = `
 .pwa-precache {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; padding: 32px;
  background: var(--bg, #1a1a2e);
  color: var(--fg, rgba(255,255,255,0.92));
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  transition: opacity .4s ease;
 }
 .pwa-precache.hide { opacity: 0; pointer-events: none; }
 .pwa-precache__icon { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 8px 30px rgba(0,0,0,.4); }
 .pwa-precache__title { font-size: 17px; font-weight: 600; }
 .pwa-precache__sub { font-size: 13px; color: var(--fg-dim, rgba(255,255,255,0.6)); margin-top: -10px; }
 .pwa-precache__track {
  width: min(78vw, 320px); height: 8px; border-radius: 999px;
  background: var(--bg-soft, rgba(255,255,255,0.06));
  overflow: hidden;
 }
 .pwa-precache__fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent, #7c3aed), var(--accent-2, #06b6d4));
  border-radius: 999px; transition: width .25s ease;
 }
 .pwa-precache__pct { font-size: 13px; color: var(--fg-dim, rgba(255,255,255,0.6)); }
 `
  document.head.appendChild(style)
 }
 function show(): void {
  if (overlay) return
  injectStyle()
  overlay = document.createElement('div')
  overlay.className = 'pwa-precache'
  overlay.innerHTML = `
    <img class="pwa-precache__icon" src="/pwa-192x192.png" alt="" />
    <div class="pwa-precache__title">正在缓存离线资源…</div>
    <div class="pwa-precache__sub">完成后断网也能发牌</div>
    <div class="pwa-precache__track"><div class="pwa-precache__fill"></div></div>
    <div class="pwa-precache__pct">0%</div>
  `
  document.body.appendChild(overlay)
  barFill = overlay.querySelector('.pwa-precache__fill')
  label = overlay.querySelector('.pwa-precache__pct')
 }
 function update(loaded: number, total: number): void {
  if (!overlay) show()
  const pct = total > 0 ? Math.round((loaded / total) * 100) : 0
  if (barFill) barFill.style.width = `${pct}%`
  if (label) label.textContent = `${pct}%  ·  ${loaded}/${total}`
 }
 function done(): void {
  if (!overlay) return
  if (barFill) barFill.style.width = '100%'
  overlay.classList.add('hide')
  const el = overlay
  overlay = null
  barFill = null
  label = null
  setTimeout(() => el.remove(), 450)
 }
 export function setupPWA(): void {
  if (!('serviceWorker' in navigator)) return
  navigator.serviceWorker.addEventListener('message', (event) => {
    const msg = event.data as SWMessage
    if (!msg || typeof msg !== 'object') return
    if (msg.type === 'precache-start') show()
    else if (msg.type === 'precache-progress') update(msg.loaded, msg.total)
    else if (msg.type === 'precache-done') done()
  })
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js', { scope: '/' }).catch((err) => {
      console.error('[pwa] SW 注册失败', err)
    })
  })
 }
@@ -0,0 +1,112 @@
 /// <reference lib="webworker" />
 // 自定义 Service Worker（injectManifest 模式）。
 // install 时逐个抓取预缓存清单中的资源，并向所有页面广播进度，
 // 用于驱动首屏的全屏加载进度条；之后断网也能完整发牌。
 export {}
 declare const self: ServiceWorkerGlobalScope & typeof globalThis
 interface PrecacheEntry {
  url: string
  revision: string | null
 }
 // injectManifest 会把构建产物清单注入到这里
 const MANIFEST = self.__WB_MANIFEST as PrecacheEntry[]
 // 由清单内容派生缓存版本号：任一资源变化版本即变，旧缓存自动淘汰
 function hashStr(s: string): string {
  let h = 5381
  for (let i = 0; i < s.length; i++) h = ((h << 5) + h + s.charCodeAt(i)) >>> 0
  return h.toString(36)
 }
 const VERSION = hashStr(MANIFEST.map((e) => `${e.url}@${e.revision ?? ''}`).join('|'))
 const CACHE = `werewolf-precache-${VERSION}`
 const INDEX = new URL('index.html', self.location.href).href
 const URLS = Array.from(new Set([INDEX, ...MANIFEST.map((e) => new URL(e.url, self.location.href).href)]))
 async function broadcast(message: unknown): Promise<void> {
  const clients = await self.clients.matchAll({ includeUncontrolled: true, type: 'window' })
  for (const client of clients) client.postMessage(message)
 }
 self.addEventListener('install', (event) => {
  event.waitUntil(
    (async () => {
      const cache = await caches.open(CACHE)
      const total = URLS.length
      let loaded = 0
      await broadcast({ type: 'precache-start', total })
      const queue = [...URLS]
      const CONCURRENCY = 6
      const worker = async () => {
        for (let url = queue.shift(); url !== undefined; url = queue.shift()) {
          try {
            const res = await fetch(url, { cache: 'no-cache' })
            if (res.ok) await cache.put(url, res.clone())
          } catch {
            // 单个资源失败不阻塞安装，下次启动或运行时再补
          }
          loaded++
          await broadcast({ type: 'precache-progress', loaded, total })
        }
      }
      await Promise.all(Array.from({ length: CONCURRENCY }, worker))
      await broadcast({ type: 'precache-done', total })
      await self.skipWaiting()
    })(),
  )
 })
 self.addEventListener('activate', (event) => {
  event.waitUntil(
    (async () => {
      const keys = await caches.keys()
      await Promise.all(
        keys.filter((k) => k.startsWith('werewolf-precache-') && k !== CACHE).map((k) => caches.delete(k)),
      )
      await self.clients.claim()
    })(),
  )
 })
 self.addEventListener('fetch', (event) => {
  const req = event.request
  if (req.method !== 'GET') return
  const url = new URL(req.url)
  if (url.origin !== self.location.origin) return
  // 导航请求：优先网络（便于上线后拿到新版），断网回退缓存的 index.html
  if (req.mode === 'navigate') {
    event.respondWith(
      (async () => {
        try {
          return await fetch(req)
        } catch {
          const cache = await caches.open(CACHE)
          return (await cache.match(INDEX)) ?? Response.error()
        }
      })(),
    )
    return
  }
  // 其它同源资源：cache-first，未命中再走网络并回填
  event.respondWith(
    (async () => {
      const cache = await caches.open(CACHE)
      const hit = await cache.match(req.url)
      if (hit) return hit
      try {
        const res = await fetch(req)
        if (res.ok && res.type !== 'opaque') cache.put(req.url, res.clone())
        return res
      } catch {
        return hit ?? Response.error()
      }
    })(),
  )
 })
@@ -18,5 +18,6 @@
    "noFallthroughCasesInSwitch": true,
    "types": ["vitest/globals"]
  },
-  "include": ["src/**/*.ts", "src/**/*.vue", "vite-env.d.ts"]
+  "include": ["src/**/*.ts", "src/**/*.vue", "vite-env.d.ts"],
  "exclude": ["src/sw.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',
  },