reader-star/apps/admin/build/plugins/pwa.ts

import type { PluginOption } from 'vite'
import { VitePWA } from 'vite-plugin-pwa'

export function setupPWA(): PluginOption {
  return VitePWA({
    registerType: 'autoUpdate',
    // 添加 devOptions 以便在开发环境调试
    devOptions: {
      enabled: false, // 开发环境启用
      type: 'module',
    },
    workbox: {
      // 排除大型 SVG 文件，避免预缓存
      globIgnores: [
        '**/team-title-bg*.svg',
        '**/cover-bg-active*.svg',
        '**/*-bg-animation*.svg',
      ],
      globPatterns: ['**/*.{js,css,html,ico,png,webp,jpg,jpeg}', '**/*.svg'],
      runtimeCaching: [
        // 字体缓存
        {
          urlPattern: /^https:\/\/fonts\.googleapis\.com\/.*/i,
          handler: 'CacheFirst',
          options: {
            cacheName: 'google-fonts-cache',
            expiration: {
              maxEntries: 10,
              maxAgeSeconds: 60 * 60 * 24 * 365, // 1 year
            },
          },
        },
        // 大型 SVG 文件运行时缓存
        {
          urlPattern: /.*\.(svg)$/,
          handler: 'CacheFirst',
          options: {
            cacheName: 'svg-cache',
            expiration: {
              maxEntries: 50,
              maxAgeSeconds: 60 * 60 * 24 * 30, // 30 days
            },
          },
        },
        // 图片资源缓存
        {
          urlPattern: /.*\.(png|jpg|jpeg|webp|gif)$/,
          handler: 'CacheFirst',
          options: {
            cacheName: 'images-cache',
            expiration: {
              maxEntries: 100,
              maxAgeSeconds: 60 * 60 * 24 * 30, // 30 days
            },
          },
        },
      ],
    },
    includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'masked-icon.svg'],
    manifest: {
      name: '阅读之星竞赛系统',
      short_name: '阅读之星',
      description: '树人研究院阅读之星竞赛系统',
      theme_color: '#ffffff',
      background_color: '#ffffff',
      display: 'standalone',
      orientation: 'landscape',
      icons: [
        { src: 'images/pwa_logo_192.png', sizes: '192x192', type: 'image/png' },
        { src: 'images/pwa_logo_512.png', sizes: '512x512', type: 'image/png' },
        { src: 'images/pwa_logo_512.png', sizes: '512x512', type: 'image/png', purpose: 'any' },
        { src: 'images/pwa_logo_512.png', sizes: '512x512', type: 'image/png', purpose: 'maskable' },
      ],
    },
  })
}