Javascript中的Service Worker如何缓存资源？

Service Worker 通过 install、fetch、activate 三阶段实现缓存：install 预缓存静态资源并带版本号；fetch 动态缓存响应并注意克隆分流；activate 清理旧缓存；调试需借助 DevTools 的 Cache Storage 和 Offline 模拟。

Service Worker 通过拦截网络请求、主动存取 Cache Storage 来实现资源缓存，核心是 install 和 fetch 两个生命周期事件的配合。

安装阶段预缓存静态资源

在 install 事件中，打开一个命名缓存（如 'v1'），用 caches.open() 获取缓存对象，再调用 cache.addAll() 批量添加关键静态资源（HTML、CSS、JS、图标等）。这些资源会在 Service Worker 激活前就存入缓存，确保离线可访问。

• 推荐只缓存版本明确、不常变更的资源，避免缓存污染
• event.waitUntil() 必须包裹异步操作，防止安装失败
• 缓存名建议带版本号（如 'static-v2'），便于后续更新时清理旧缓存

运行时动态缓存新请求

在 fetch 事件中，先尝试从缓存匹配；未命中则发起网络请求，并将响应克隆后存入缓存（注意：响应流只能读一次，需用 response.clone() 分流）。

• 对 HTML 请求建议优先走网络（防止缓存过期首页），其他资源可“缓存优先”策略
• 可按 URL 规则区分缓存策略，例如 API 接口设短时效，图片设长时效
• 使用 caches.match(request) 查找缓存，返回 Promise，需用 await 或 .then()

激活阶段清理旧缓存

在 activate 事件中，遍历 caches.keys()，删除非当前版本的缓存。这一步确保旧资源不会残留干扰新逻辑。

标签： css javascript java html js app access ai 跨域