Workbox 高级缓存与版本管理：预缓存、运行时策略与一致性

Workbox 高级缓存与版本管理：预缓存、运行时策略与一致性技术背景Workbox 封装了 Service Worker 的常用缓存模式，提供预缓存与运行时缓存策略、路由匹配与版本管理，适合快速构建高可靠离线与加速能力。核心内容预缓存与版本管理import { precacheAndRoute } from 'workbox-precaching';

// __WB_MANIFEST 由构建注入

precacheAndRoute(self.__WB_MANIFEST);

运行时缓存策略与路由import { registerRoute } from 'workbox-routing';

import { CacheFirst, NetworkFirst, StaleWhileRevalidate } from 'workbox-strategies';

import { ExpirationPlugin } from 'workbox-expiration';

// 静态资源

registerRoute(({ request }) => request.destination === 'style', new StaleWhileRevalidate({ cacheName: 'styles' }));

registerRoute(({ request }) => request.destination === 'script', new StaleWhileRevalidate({ cacheName: 'scripts' }));

registerRoute(({ request }) => request.destination === 'image', new CacheFirst({ cacheName: 'images', plugins: [ new ExpirationPlugin({ maxEntries: 200, maxAgeSeconds: 7 * 24 * 3600 }) ] }));

// API 数据

registerRoute(({ url }) => url.pathname.startsWith('/api/'), new NetworkFirst({ cacheName: 'api', networkTimeoutSeconds: 3 }));

一致性与版本校验self.addEventListener('message', (event) => {

if (event.data && event.data.type === 'SKIP_WAITING') self.skipWaiting();

});

// 页面端触发更新

navigator.serviceWorker?.controller?.postMessage({ type: 'SKIP_WAITING' });

技术验证参数在真实站点（Chrome 128/Edge 130，Workbox 构建）：预缓存命中率：≥ 85%运行时缓存命中率：≥ 70%版本更新切换成功率：≥ 95%应用场景离线应用与加速场景复杂资源的缓存治理与版本控制最佳实践控制预缓存列表规模，避免过度膨胀按资源类型选择策略，结合过期插件治理体积建立版本校验与主动更新机制，保障一致性