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() 分流）。
caches.match(request) 查找缓存，返回 Promise，需用 await 或 .then()
在 activate 事件中，遍历 caches.keys()，删除非当前版本的缓存。这一步确保旧资源不会残留干扰新逻辑。
立即学习“Java免费学习笔记（深入）”；
event.waitUntil() 等待清理完成'v1' 开头的缓存名在 Chrome DevTools 的 Application → Cache Storage 面板可查看已缓存的内容；Network 面板勾选 “Disable cache” 并启用 “Offline” 可模拟离线场景。还可监听 fetch 事件中的 event.request.destination 过滤资源类型（如 'script'、'image'）做精细化控制。
new Response(body, options)
Access-Control-Allow-Origin，否则无法缓存destination: 'document'）返回的 HTML 响应默认不支持缓存，需服务端加 Cache-Control 头基本上就这些。缓存逻辑不复杂但容易忽略细节，关键是理清 install / fetch / activate 各自职责，再结合实际资源类型设计策略。
以上就是Javascript中的Service Worker如何缓存资源？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
829
收藏
