PWA 功能包（@vup/pwa）
@vup/pwa 是 VUP 的共享 PWA 接入层能力包。
目标是让应用模板在不重复配置 vite-plugin-pwa 的前提下，快速启用一致的 PWA 能力。
提供能力
- 封装好的 Vite PWA 插件接入
- 可复用的 PWA 预设与 Manifest 辅助
- Service Worker 注册与更新流程运行时助手
能力边界
- 用于增强现有应用模板（不替代应用框架）
- 默认以静态资源缓存策略为主
- 运行时 API 保持轻量，便于业务按需扩展
典型接入方式
1. 在 Vite 配置中接入
ts
import vue from '@vitejs/plugin-vue';
import { defineConfig } from 'vite';
import { createVupPwaPlugin } from '@vup/pwa';
export default defineConfig({
plugins: [
vue(),
createVupPwaPlugin({
appName: 'My App',
shortName: 'MyApp',
description: 'App with PWA capability',
}),
],
});2. 在运行时注册
ts
import { registerVupPwa } from '@vup/pwa/runtime';
await registerVupPwa({
onOfflineReady() {
console.info('[pwa] offline ready');
},
onNeedRefresh() {
console.info('[pwa] new version available');
},
});3. 触发更新
ts
import { activateWaitingVupPwa, updateVupPwa } from '@vup/pwa/runtime';
const registration = await registerVupPwa();
await updateVupPwa(registration);
await activateWaitingVupPwa(registration);
window.location.reload();