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

Service Worker 缓存内容预览器 - 查看离线资源列表

PWA 开发工具 Service Worker 缓存 预览
28
0
0
0
检测中...
缓存存储
-
资源总数
-
估算总大小
-
Opaque 资源
-
正在扫描...
筛选缓存： 全部
# URL / 路径 类型 大小 状态 缓存来源 操作

暂无缓存资源

当前页面未检测到 Service Worker 缓存内容

缓存 API 不可用

请在 HTTPS 或 localhost 环境下使用此工具

共 0 条记录
常见问题
Service Worker 缓存（Cache Storage API）是浏览器提供的一种持久化存储机制，允许 Web 应用以编程方式缓存网络请求和响应。它通常与 Service Worker 配合使用，用于实现离线访问、提升加载性能。缓存的资源包括 HTML、CSS、JavaScript、图片、字体等静态资源。开发者可以通过 caches.open() 创建缓存，通过 cache.add() 或 cache.put() 添加资源。
查看缓存内容可以帮助开发者：
1. 调试离线功能：确认预缓存资源是否已正确存储；
2. 验证缓存策略：检查运行时缓存是否按预期工作；
3. 排查存储问题：了解缓存占用的存储空间，避免超出配额；
4. 审计资源：识别意外缓存或过期的资源，确保用户获取最新内容。
Opaque（不透明）响应是指跨域资源（CDN、第三方服务等）在不启用 CORS 的情况下被缓存。出于安全考虑，浏览器会隐藏这些响应的具体内容，状态码显示为 0，body 不可读取，大小信息可能不准确。这是浏览器的安全机制，防止跨域信息泄露。如需获取准确的资源信息，请确保资源服务器配置了正确的 CORS 头。
Cache Storage API 仅能在安全上下文中使用，即需要 HTTPS 协议或 localhost 环境。如果您在 HTTP 页面上看到此提示，请：
1. 使用 https:// 访问页面；
2. 在本地开发时使用 localhost 或 127.0.0.1；
3. 使用支持 HTTPS 的开发服务器（如 Vite、webpack-dev-server 的 HTTPS 模式）。
清除 Service Worker 缓存会删除所有离线存储的资源。下次访问时，Service Worker 会根据其策略重新缓存资源。在开发调试阶段这是安全的操作；但在生产环境中，清除缓存可能导致用户在离线时无法访问应用。建议仅在开发调试时使用清除功能，生产环境应通过 Service Worker 的版本管理机制来控制缓存更新。
本工具使用以下方式估算大小：
1. 优先读取响应头中的 Content-Length；
2. 对于 Opaque 响应，使用浏览器报告的 padded size（约 7KB 的倍数）；
3. 对于没有 Content-Length 的资源，显示为"未知"。实际存储大小可能与估算有差异，因为浏览器可能会对资源进行压缩或添加额外的元数据。精确大小可通过读取 blob 获取（本工具支持按需获取）。
🔧 相关工具