Cache API：版本治理与离线缓存策略

---

title: Cache API：版本治理与离线缓存策略

keywords:

• CacheStorage
• caches.open
• cache.addAll
• 版本化
• 离线缓存

description: 使用 Cache API 管理静态资源的版本化与离线缓存，结合 Service Worker 实现安装与更新策略，确保一致性与可控清理。

categories:

• 文章资讯
• 技术教程

---

概述

Cache API 提供基于键值的请求/响应缓存。与 Service Worker 配合可在安装阶段预缓存与在激活阶段清理旧版本，保障离线与快速加载。

用法/示例

// sw.js
const VERSION = 'v3'
self.addEventListener('install', e => {
  e.waitUntil(caches.open(VERSION).then(c => c.addAll(['/','/app.js','/styles.css'])))
})
self.addEventListener('activate', e => {
  e.waitUntil(caches.keys().then(keys => Promise.all(keys.filter(k => k !== VERSION).map(k => caches.delete(k)))))
})
self.addEventListener('fetch', e => {
  e.respondWith(caches.match(e.request).then(r => r || fetch(e.request)))
})

工程建议

• 对资源进行版本化与指纹，避免缓存混淆；在更新时提示用户刷新。
• 选择合适的缓存策略（缓存优先/网络优先/预取），按路由与资源类型区分。
• 审计缓存大小与命中率，定期清理与压缩，避免膨胀与过期数据。

参考与验证

• MDN：Cache API — https://developer.mozilla.org/docs/Web/API/Cache
• web.dev：Service Workers — https://web.dev/learn/pwa/service-workers