PWA (Progressive Web App)
The Vite PWA plugin wires up a manifest, service worker, and Workbox caching strategies.
A Progressive Web App adds installability and offline behavior to a regular web app via two pieces: a web app manifest (name, icons, theme color — what the OS uses when the app is installed to the home screen) and a service worker (a background script that intercepts network requests and caches responses). The vite-plugin-pwa generates both from config so you don't hand-write the service worker.
In vite.config.ts, VitePWA({ registerType: 'autoUpdate' }) registers a service worker that updates itself when a new build is deployed. The manifest block declares the installable metadata — name, short_name, theme_color, and an icons array (at minimum 192x192 and 512x512 PNGs for home-screen and splash use).
Caching is configured through Workbox's runtimeCaching. The example matches API requests (/\/api\/.*/) with a NetworkFirst strategy: try the network, and fall back to the cache if offline or the request fails. A bounded cache (cacheName: 'api-cache', maxEntries: 50) keeps storage in check. Other common strategies are CacheFirst (for hashed static assets) and StaleWhileRevalidate (serve cache, refresh in background).
A service worker is a programmable proxy that sits in front of your network calls — conceptually like a caching reverse proxy or a Caffeine/Redis cache layer in a Spring service, but running in the browser. NetworkFirst is the equivalent of "hit the DB, fall back to cache on failure," and the manifest is like the deployment descriptor that tells the host how to present the app.
- A PWA needs both a manifest (installability metadata) and a service worker (request interception/caching); vite-plugin-pwa generates both.
- registerType: 'autoUpdate' makes the service worker refresh itself when a new build ships.
- NetworkFirst = try network, fall back to cache — good for API data that should be fresh but tolerate offline.
- Bound runtime caches (cacheName + expiration.maxEntries) so they don't grow unbounded.
Worked Code
// Service Worker registration (via Vite PWA plugin)
// vite.config.ts
import { VitePWA } from 'vite-plugin-pwa';
export default defineConfig({
plugins: [
react(),
VitePWA({
registerType: 'autoUpdate',
manifest: {
name: 'Dice Expense Manager',
short_name: 'DiceEMS',
theme_color: '#1B4F72',
icons: [
{ src: '/icon-192.png', sizes: '192x192', type: 'image/png' },
{ src: '/icon-512.png', sizes: '512x512', type: 'image/png' },
],
},
workbox: {
runtimeCaching: [
{
urlPattern: /\/api\/.*/,
handler: 'NetworkFirst', // try network, fallback to cache
options: { cacheName: 'api-cache', expiration: { maxEntries: 50 } },
},
],
},
}),
],
});Interview-Ready Q&A
A web app manifest and a service worker. The manifest is a JSON file declaring name, icons, and theme color so the OS can install the app to the home screen with a proper icon and splash. The service worker is a background script that intercepts network requests, enabling offline support, caching, and push notifications. vite-plugin-pwa generates both from config.
- 1PWA = manifest (installability) + service worker (caching/offline); vite-plugin-pwa generates both.
- 2Pick the strategy per resource: NetworkFirst for API data, CacheFirst for hashed assets, StaleWhileRevalidate for fast-but-fresh.
- 3registerType: 'autoUpdate' refreshes the SW on new builds; always bound caches with maxEntries.