PWA Package (@vup/pwa)
@vup/pwa is VUP's shared PWA integration layer.
Its goal is to let app templates enable PWA capability with consistent defaults, without duplicating vite-plugin-pwa setup in every app.
What It Provides
- Vite plugin wrapper for PWA setup
- Reusable PWA preset and manifest helpers
- Runtime helpers for service worker registration and update flow
Scope
- Enhances existing app templates (does not replace app frameworks)
- Defaults to static asset caching strategy
- Keeps runtime API lightweight and framework-friendly
Typical Usage
1. Configure in 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. Register at Runtime
ts
import { registerVupPwa } from '@vup/pwa/runtime';
await registerVupPwa({
onOfflineReady() {
console.info('[pwa] offline ready');
},
onNeedRefresh() {
console.info('[pwa] new version available');
},
});3. Trigger Update
ts
import { activateWaitingVupPwa, updateVupPwa } from '@vup/pwa/runtime';
const registration = await registerVupPwa();
await updateVupPwa(registration);
await activateWaitingVupPwa(registration);
window.location.reload();