- Deleted the old service worker implementation and manifest file. - Integrated Vite PWA plugin for improved service worker management. - Updated main.js to remove service worker registration logic. - Refactored registerServiceWorker.js to use the new PWA registration method. - Added new service worker (sw.js) with caching strategies for API and static resources. - Updated vite.config.js to include PWA configuration and manifest details.
118 lines
3.0 KiB
JavaScript
118 lines
3.0 KiB
JavaScript
import { fileURLToPath, URL } from 'node:url'
|
|
|
|
import { defineConfig } from 'vite'
|
|
import vue from '@vitejs/plugin-vue'
|
|
import vueDevTools from 'vite-plugin-vue-devtools'
|
|
import { VitePWA } from 'vite-plugin-pwa'
|
|
|
|
// https://vite.dev/config/
|
|
export default defineConfig({
|
|
plugins: [
|
|
vue(),
|
|
vueDevTools(),
|
|
VitePWA({
|
|
strategies: 'injectManifest',
|
|
srcDir: 'src',
|
|
filename: 'sw.js',
|
|
registerType: 'prompt', // 使用提示模式,以便在 App.vue 中显示刷新按钮
|
|
injectRegister: 'auto',
|
|
manifest: {
|
|
name: '账单',
|
|
short_name: '账单',
|
|
description: '个人账单管理与邮件解析',
|
|
theme_color: '#1989fa',
|
|
background_color: '#ffffff',
|
|
display: 'standalone',
|
|
orientation: 'portrait-primary',
|
|
icons: [
|
|
{
|
|
src: 'icons/icon-72x72.svg',
|
|
sizes: '72x72',
|
|
type: 'image/svg+xml',
|
|
purpose: 'any maskable'
|
|
},
|
|
{
|
|
src: 'icons/icon-96x96.svg',
|
|
sizes: '96x96',
|
|
type: 'image/svg+xml',
|
|
purpose: 'any maskable'
|
|
},
|
|
{
|
|
src: 'icons/icon-128x128.svg',
|
|
sizes: '128x128',
|
|
type: 'image/svg+xml',
|
|
purpose: 'any maskable'
|
|
},
|
|
{
|
|
src: 'icons/icon-144x144.svg',
|
|
sizes: '144x144',
|
|
type: 'image/svg+xml',
|
|
purpose: 'any maskable'
|
|
},
|
|
{
|
|
src: 'icons/icon-152x152.svg',
|
|
sizes: '152x152',
|
|
type: 'image/svg+xml',
|
|
purpose: 'any maskable'
|
|
},
|
|
{
|
|
src: 'icons/icon-192x192.svg',
|
|
sizes: '192x192',
|
|
type: 'image/svg+xml',
|
|
purpose: 'any maskable'
|
|
},
|
|
{
|
|
src: 'icons/icon-384x384.svg',
|
|
sizes: '384x384',
|
|
type: 'image/svg+xml',
|
|
purpose: 'any maskable'
|
|
},
|
|
{
|
|
src: 'icons/icon-512x512.svg',
|
|
sizes: '512x512',
|
|
type: 'image/svg+xml',
|
|
purpose: 'any maskable'
|
|
}
|
|
],
|
|
shortcuts: [
|
|
{
|
|
name: '查看账单',
|
|
short_name: '账单',
|
|
description: '快速查看账单列表',
|
|
url: '/',
|
|
icons: [
|
|
{
|
|
src: 'icons/icon-96x96.png',
|
|
sizes: '96x96'
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
devOptions: {
|
|
enabled: true,
|
|
type: 'module'
|
|
}
|
|
})
|
|
],
|
|
resolve: {
|
|
alias: {
|
|
'@': fileURLToPath(new URL('./src', import.meta.url))
|
|
},
|
|
},
|
|
build: {
|
|
// 确保 Service Worker 和 manifest 被正确复制
|
|
rollupOptions: {
|
|
input: {
|
|
main: fileURLToPath(new URL('./index.html', import.meta.url))
|
|
}
|
|
}
|
|
},
|
|
server: {
|
|
headers: {
|
|
// 允许 Service Worker 在开发环境中工作
|
|
'Service-Worker-Allowed': '/'
|
|
}
|
|
}
|
|
})
|