Vue Academy · 课时

Service Worker 策略

Q: 「Service Worker 策略」这节课中我会学到什么？

缓存优先、网络优先、过期后重新验证——按资源类型选择合适策略 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

缓存优先、网络优先、过期后重新验证——按资源类型选择合适策略

Service Worker 策略 是 CoddyKit 上的免费 Vue Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

缓存策略概览

服务工作线程会拦截网络请求，并决定从缓存、网络还是两者中提供响应。Workbox 定义了四种核心策略，每种策略都适用于不同类型的资源。

CacheFirst

CacheFirst 会从缓存提供响应，只有缓存未命中时才访问网络。它最适合很少变化且使用内容哈希的资源，例如字体和图像。

// serve cached, fall back to network on miss

NetworkFirst

NetworkFirst 会先尝试访问网络，在离线或超时的情况下回退到缓存。它最适合需要保持最新、同时又希望支持离线访问的 API 响应。

// try network, fall back to cache when offline

StaleWhileRevalidate

StaleWhileRevalidate 会立即返回缓存副本以提高速度，同时在后台获取新副本来更新缓存。它非常适合 JS 包和 CSS。

// return cache now, update cache in background

NetworkOnly 与 CacheOnly

这是两个极端：NetworkOnly 始终获取网络内容（不进行缓存），而 CacheOnly 只提供预缓存的内容。对于不可缓存的 POST 请求或严格预缓存的资源，请使用这两种策略。

runtimeCaching 数组

在 Workbox 配置中，runtimeCaching 是一个规则数组。每条规则都会匹配请求 URL，并分配一种策略和一个缓存名称。

VitePWA({
  workbox: {
    runtimeCaching: [ /* rules */ ]
  }
});

urlPattern 规则

每条规则都包含一个 urlPattern（正则表达式或函数）、一个 handler（策略名称）和一些 options，例如缓存名称。

{
  urlPattern: /\/api\//,
  handler: "NetworkFirst",
  options: { cacheName: "api-cache" }
}

使用 CacheFirst 缓存静态资源

匹配图像和字体，并使用 CacheFirst 提供响应，因为它们的内容哈希 URL 会在文件发生变化时改变。

{
  urlPattern: /\.(?:png|jpg|svg|woff2)$/,
  handler: "CacheFirst",
  options: { cacheName: "static-assets" }
}

使用 StaleWhileRevalidate 缓存 JS 包

立即从缓存提供脚本和样式包，同时在后台刷新它们。

{
  urlPattern: /\.(?:js|css)$/,
  handler: "StaleWhileRevalidate",
  options: { cacheName: "assets" }
}

过期插件

如果没有限制，缓存会无限增长。expiration 选项会限制条目数量和最长存留时间，并优先清除最旧的条目。

options: {
  cacheName: "api-cache",
  expiration: {
    maxEntries: 50,
    maxAgeSeconds: 60 * 60 * 24
  }
}

缓存不透明响应

对于跨源 API 响应，您通常会添加带有允许状态码的 cacheableResponse，这样只有成功的响应才会被存储。

options: {
  cacheableResponse: { statuses: [0, 200] }
}

快速检查

对于应保持最新但又能离线使用的 API 响应，哪种策略最合适？

回顾

Workbox 策略分别适用于不同类型的资源：静态资源使用 CacheFirst，API 响应使用 NetworkFirst，JS/CSS 包使用 StaleWhileRevalidate。在 runtimeCaching 数组中，通过 urlPattern、handler 和 options 定义这些策略，并可使用 expiration 插件等选项限制缓存大小。

常见问题解答

「Service Worker 策略」课时是免费的吗？

是的 — 「Service Worker 策略」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「Service Worker 策略」这节课中我会学到什么？

缓存优先、网络优先、过期后重新验证——按资源类型选择合适策略你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「Service Worker 策略」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy