无需登录 数据私有 本地保存

Service Worker 缓存内容查看器 - 查看缓存条目

12
0
0
0

Service Worker 缓存查看器

查看和管理 Cache Storage 中的缓存条目
加载缓存列表...
缓存数量
0
条目总数
0
估算大小
0 B
内容类型
0
# URL 方法 状态 类型 大小 所属缓存 操作
请从左侧选择一个缓存以查看条目
共 0 个条目
正在加载条目...
常见问题与知识点
什么是Service Worker缓存？

Service Worker缓存（Cache Storage API）是浏览器提供的持久化存储机制，允许开发者以Request-Response对的形式缓存网络资源。它独立于HTTP缓存，由开发者完全控制，常用于PWA离线支持、性能优化等场景。缓存数据存储在浏览器的私有存储空间中。

缓存可以存储哪些内容？

Cache Storage可以存储任何HTTP响应，包括HTML页面、CSS/JS文件、图片、字体、JSON数据、视频片段等。每个缓存条目由Request对象（URL+方法+头部）和Response对象（状态码+头部+正文）组成。常见的缓存策略包括预缓存（precaching）、运行时缓存（runtime caching）等。

如何清除Service Worker缓存？

可以通过本工具选择单个缓存条目删除，或清空整个缓存。也可以使用caches.delete('cache-name')在开发者控制台中删除指定缓存。在Chrome DevTools的Application > Cache Storage面板中也可以手动管理。浏览器的"清除站点数据"操作也会清空所有缓存。

缓存存储空间有多大？

浏览器对Cache Storage的配额因浏览器和平台而异。Chrome通常允许源使用约60%的可用磁盘空间（在Storage API的配额管理下）。可以通过navigator.storage.estimate()查询当前使用量和配额。移动端浏览器的配额通常更小，且系统存储紧张时可能被清理。

为什么需要HTTPS？

Service Worker和Cache Storage API仅在安全上下文（HTTPS或localhost）中可用。这是浏览器的安全策略，防止中间人攻击篡改Service Worker脚本和缓存内容。在开发环境中，localhost被视为安全上下文。生产环境必须使用HTTPS。

常用的缓存命名规范

Workbox通常使用workbox-precache-v2-{url}命名预缓存，运行时缓存可自定义名称如images-cache-v1、api-responses等。带版本号的命名（如v1、v2）便于缓存更新时清理旧版本。良好的命名习惯有助于缓存管理和调试。

🔧 相关工具