JavaScript 中怎么利用浏览器的 Cache API 缓存静态资源-js教程-PHP中文网

cache api 专为缓存 http 请求–响应对设计，适用于 service worker 预缓存静态资源、运行时动态缓存及主线程有限缓存，需配合版本化命名、精准匹配与清理策略使用。

javascript 中怎么利用浏览器的 cache api 缓存静态资源

Cache API 是专为缓存 HTTP 请求–响应对设计的，适合在 Service Worker 中统一管理静态资源（如 HTML、CSS、JS、图片），也能在主线程中有限使用。它不替代 HTTP 强缓存，而是补充控制力——比如预加载、版本化清理、离线兜底。

这是最典型也最推荐的做法。Service Worker 安装时主动 fetch 并缓存指定资源，确保首次离线即可访问：

用 caches.open('static-v1') 创建带版本号的缓存名，便于后续升级时 caches.delete('static-v0') 清理旧缓存
在 install 事件中调用 cache.addAll(['/', '/style.css', '/app.js', '/logo.png']) —— 它会自动发起 GET 请求并只缓存状态码为 200 的响应
注意：addAll 不支持 POST 或带自定义 header 的请求；若需更精细控制（比如跳过 404 或处理重定向），改用 cache.put(request, response) 手动写入

用户访问未预缓存的页面或资源时，可在 fetch 事件中拦截并缓存：

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

先检查 event.request.destination，只缓存 script、style、image、font 等类型，避免缓存导航请求（document）或 API（json）造成混淆
匹配成功后，用 caches.match(event.request) 尝试读取；未命中则 fetch(event.request)，拿到 response 后调用 response.clone() 写入缓存（原 response 只能读一次）
推荐对静态资源启用 Cache-Control: immutable 响应头，配合 Cache API 实现“一次缓存、长期有效”

缓存不是扔进去就完事，得可维护：

缓存名建议含语义和时间/版本标识，例如 'static-2026-q3' 或 'fonts-google-v2'，避免用泛称如 'cache' 或 'data'
升级时，在新的 Service Worker 的 activate 事件中遍历 caches.keys()，删除不匹配当前版本前缀的缓存
不建议依赖 cache.add() 缓存动态路径（如带时间戳的图片），它无法处理 query 参数变化；改用 cache.match(new Request(url), { ignoreSearch: true }) 控制匹配逻辑

主线程也能调用 caches.open()，但受跨域和权限限制更多，且无法拦截全局请求。适用于小范围、明确场景：

比如 SPA 首屏加载后，主动缓存后续可能用到的子页面 HTML：fetch('/about.html').then(r => caches.open('pages').then(c => c.put('/about.html', r)))
但要注意：主线程无权访问其他源的缓存；且不能在页面卸载前保证写入完成，建议加 await 和简单错误捕获
若只是提升重复访问速度，优先用标准 HTTP 缓存头（Cache-Control: public, max-age=31536000），比 JS 缓存更轻量、更可靠