Workbox PWA
Vite PWA Plugin
npm install vite-plugin-pwa
import { VitePWA } from 'vite-plugin-pwa';
export default defineConfig({
plugins: [VitePWA({
registerType: 'autoUpdate',
workbox: {
globPatterns: ['**/*.{js,css,html,ico,png,svg,woff2}'],
runtimeCaching: [
{ urlPattern: /^https:\/\/api\./, handler: 'NetworkFirst',
options: { cacheName: 'api', expiration: { maxEntries: 50, maxAgeSeconds: 300 } } },
{ urlPattern: /\.(?:png|jpg|svg|webp)$/, handler: 'CacheFirst',
options: { cacheName: 'images', expiration: { maxEntries: 100 } } },
],
},
})],
});
Workbox Strategies: CacheFirst, NetworkFirst, StaleWhileRevalidate, NetworkOnly, CacheOnly
Background Sync for offline form submissions
Precaching for app shell
1---2name: pwa-workbox3description: Workbox PWA4---5# Workbox PWA67## Vite PWA Plugin8```bash9npm install vite-plugin-pwa10```1112```typescript13import { VitePWA } from 'vite-plugin-pwa';14export default defineConfig({15 plugins: [VitePWA({16 registerType: 'autoUpdate',17 workbox: {18 globPatterns: ['**/*.{js,css,html,ico,png,svg,woff2}'],19 runtimeCaching: [20 { urlPattern: /^https:\/\/api\./, handler: 'NetworkFirst',21 options: { cacheName: 'api', expiration: { maxEntries: 50, maxAgeSeconds: 300 } } },22 { urlPattern: /\.(?:png|jpg|svg|webp)$/, handler: 'CacheFirst',23 options: { cacheName: 'images', expiration: { maxEntries: 100 } } },24 ],25 },26 })],27});28```2930## Workbox Strategies: CacheFirst, NetworkFirst, StaleWhileRevalidate, NetworkOnly, CacheOnly31## Background Sync for offline form submissions32## Precaching for app shell
ComeOnOliver