Workbox是主流Service Worker封装方案，通过模块化封装缓存策略、路由匹配、预缓存与过期控制，生产环境需明确缓存内容、策略选择及更新机制：静态资源用CacheFirst+预缓存，图片加ExpirationPlugin限制体积与时效，API按一致性要求选NetworkFirst或StaleWhileRevalidate，路由须精准匹配避免误伤，启用skipWaiting和clientsClaim保障缓存及时更新与SPA离线可用。
Workbox 是目前最主流的 Service Worker 封装方案，它把缓存策略、路由匹配、预缓存、过期控制等能力模块化封装，避免手动写大量底层事件监听代码。在生产环境（不是开发环境）中，规范化配置的关键在于明确三件事：缓存什么、用什么策略、何时更新。
区分资源类型，按需分配缓存策略
不同资源对时效性、离线可用性、网络压力的要求不同，不能一概而用同一种策略：
-
静态资源（JS/CSS/HTML/字体）：适合
CacheFirst+ 预缓存（precaching）。这些文件由构建工具生成哈希名，内容变更即文件名变更，天然支持版本淘汰。Workbox 在install阶段自动完成预缓存。 -
图片资源：也推荐
CacheFirst，但要加过期插件控制体积和新鲜度。例如限制最多存 60 张、保留 30 天：
new CacheFirst({
cacheName: 'images',
plugins: [new ExpirationPlugin({ maxEntries: 60, maxAgeSeconds: 30 * 24 * 60 * 60 })],
}));
API 接口按业务重要性选策略
动态数据不适用预缓存，必须走运行时缓存（runtime caching），策略选择取决于业务逻辑：
Skill Weave Chains — 技能链路由引擎
下载
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
- 用户资料、订单列表等强一致性要求高的接口：用
NetworkFirst。优先发请求，失败才读缓存，保证看到最新状态。 - 天气、新闻、商品分类等允许短暂滞后的内容：用
StaleWhileRevalidate。立即返回缓存结果提升首屏速度，同时后台静默刷新缓存，下次访问就是新数据。 - 埋点上报、非关键日志等可丢弃请求：配合
BackgroundSync，离线时暂存，联网后自动重发。
配置路由要精准，避免误伤或漏配
Workbox 的 registerRoute 支持正则、函数、字符串三种匹配方式。生产环境务必避免宽泛匹配：
- ❌ 错误示例：
registerRoute(/.*/, strategy)—— 拦截所有请求，可能把跨域资源、第三方 SDK 请求也纳入缓存，引发异常。 - ✅ 推荐做法：用正则精确限定域名和路径前缀。比如只缓存自己 API 域名下的 GET 请求：
({url, request}) =>
url.origin === 'https://api.example.com' &&
request.method === 'GET',
new NetworkFirst()
);
确保缓存更新机制可靠
缓存不是设了就完事。Vue CLI 的 PWA 插件默认启用 skipWaiting 和 clientsClaim，这是关键：
-
skipWaiting让新 SW 安装后立刻激活，跳过 waiting 状态，避免用户长时间停留在旧版本缓存中； -
clientsClaim让新 SW 立即接管所有已打开页面，不用等用户关掉旧标签页； - 配合
navigateFallback: '/index.html'，保障 SPA 路由离线可访问。
