Workbox 是什么？它如何简化 Service Worker 的缓存策略？

Workbox 是 Google 推出的 Service Worker 工具库，将常见的缓存策略、路由匹配、预缓存等能力封装为开箱即用的模块，大幅降低 SW 开发复杂度。核心提供三种缓存策略：CacheFirst（缓存优先，适合静态资源）、NetworkFirst（网络优先，适合API数据）、StaleWhileRevalidate（先用缓存再后台更新，适合非关键资源）。配合 workbox-precaching 可在 install 阶段批量预缓存，配合 ExpirationPlugin 可控制缓存条目数和过期时间。

追问

CacheFirst 和 StaleWhileRevalidate 分别适合什么场景？ CacheFirst 适合字体、样式等不变资源，命中缓存直接返回，速度最快；StaleWhileRevalidate 适合图片或第三方脚本，先返回缓存保证响应速度，同时后台更新缓存，下次请求拿到新版本。

workbox-precaching 和运行时缓存有什么区别？ precache 在 SW install 时一次性缓存资源清单（self.__WB_MANIFEST），确保离线可用；运行时缓存在 fetch 事件触发时按策略写入，首次请求仍需网络。

Workbox 如何与构建工具集成？ Webpack 用 workbox-webpack-plugin（GenerateSW 自动生成或 InjectManifest 注入清单）；Vite 用 vite-plugin-pwa，在构建时自动生成 SW 并注入运行时缓存配置。

Workbox 的 BackgroundSyncPlugin 解决了什么问题？ 当 POST 请求因离线失败时，自动将请求放入队列，待网络恢复后重试，确保数据不丢失。适用于表单提交、数据上报等场景。

写段代码

javascript
import { registerRoute } from 'workbox-routing';
import { CacheFirst, StaleWhileRevalidate } from 'workbox-strategies';

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