rjl
782c61a38c
- 增强PWA开发环境支持，添加devOptions配置以便调试 - 优化Workbox缓存策略，排除大型SVG文件预缓存 - 添加运行时缓存规则支持SVG、图片等资源的CacheFirst策略 - 更新PWA manifest图标路径，使用public文件夹中的新图标资源 - 添加Service Worker注册文件和Workbox库文件 - 替换favicon.svg为favicon.ico，新增多种尺寸的PWA图标 - 生成PWA构建报告文件 - 优化manifest描述信息
77 lines
2.4 KiB
TypeScript
77 lines
2.4 KiB
TypeScript
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' },
|
|
],
|
|
},
|
|
})
|
|
}
|