patternjavascriptTip
Workbox — production-ready service worker configuration
Viewed 0 times
Workbox 7.x, vite-plugin-pwa 0.18+
workboxvite-plugin-pwaprecacheregisterRouteservice worker generatorWB_MANIFEST
browser
Problem
Hand-rolling service worker caching logic is error-prone and difficult to maintain. Versioning caches, handling cache cleanup, and applying correct routing strategies requires significant boilerplate.
Solution
Use Workbox to generate a service worker with typed routing strategies and automatic precaching.
// vite-plugin-pwa (Vite projects)
// vite.config.js
import { VitePWA } from 'vite-plugin-pwa';
export default {
plugins: [
VitePWA({
registerType: 'autoUpdate',
workbox: {
globPatterns: ['**/*.{js,css,html,ico,png,svg}'],
runtimeCaching: [
{
urlPattern: /^https:\/\/api\.example\.com\/data/,
handler: 'NetworkFirst',
options: { cacheName: 'api-cache', expiration: { maxAgeSeconds: 300 } },
},
{
urlPattern: /\.(?:png|jpg|jpeg|svg|gif|webp)$/,
handler: 'CacheFirst',
options: { cacheName: 'images', expiration: { maxEntries: 60 } },
},
],
},
}),
],
};
// Manual Workbox in sw.js
import { registerRoute } from 'workbox-routing';
import { CacheFirst, NetworkFirst } from 'workbox-strategies';
import { precacheAndRoute } from 'workbox-precaching';
precacheAndRoute(self.__WB_MANIFEST); // injected by build tool
registerRoute(({ request }) => request.destination === 'image', new CacheFirst());
// vite-plugin-pwa (Vite projects)
// vite.config.js
import { VitePWA } from 'vite-plugin-pwa';
export default {
plugins: [
VitePWA({
registerType: 'autoUpdate',
workbox: {
globPatterns: ['**/*.{js,css,html,ico,png,svg}'],
runtimeCaching: [
{
urlPattern: /^https:\/\/api\.example\.com\/data/,
handler: 'NetworkFirst',
options: { cacheName: 'api-cache', expiration: { maxAgeSeconds: 300 } },
},
{
urlPattern: /\.(?:png|jpg|jpeg|svg|gif|webp)$/,
handler: 'CacheFirst',
options: { cacheName: 'images', expiration: { maxEntries: 60 } },
},
],
},
}),
],
};
// Manual Workbox in sw.js
import { registerRoute } from 'workbox-routing';
import { CacheFirst, NetworkFirst } from 'workbox-strategies';
import { precacheAndRoute } from 'workbox-precaching';
precacheAndRoute(self.__WB_MANIFEST); // injected by build tool
registerRoute(({ request }) => request.destination === 'image', new CacheFirst());
Why
Workbox handles cache versioning, expiration, cache cleanup, and strategy implementation correctly. It eliminates entire classes of service worker bugs that appear in hand-rolled implementations.
Gotchas
- precacheAndRoute requires the build tool to inject __WB_MANIFEST — without the build plugin, the manifest is undefined
- registerType: 'autoUpdate' calls skipWaiting automatically — users get new content without prompting, but unsaved work in the old version could be lost
- Workbox CDN URLs should not be used in production — bundle with importScripts or use the module build
- Cache expiration plugin requires a cacheName — without it, entries accumulate indefinitely
Context
Any PWA project using Vite, webpack, or Next.js that needs service worker caching
Revisions (0)
No revisions yet.