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

Cache API 浏览器 - 查看与删除Service Worker缓存

PWA 开发工具 Cache API 删除 查看 缓存
67
0
0
0

Cache API 浏览器

查看、预览和管理 Service Worker 缓存存储

缓存列表 0

暂无缓存

缓存条目 - 请选择左侧缓存

选择左侧缓存以查看条目

常见问题与知识点

Service Worker 缓存（Cache API）是浏览器提供的一种持久化存储机制，允许网站将请求/响应对存储在本地缓存中。它最初是为 Service Worker 设计的，但在普通网页中也可以通过 window.caches 访问。与浏览器 HTTP 缓存不同，Cache API 让开发者可以完全编程化地控制缓存什么、何时缓存、何时更新，是实现离线应用（PWA）的核心技术之一。缓存数据存储在浏览器的 Cache Storage 中，按缓存名称（如 "v1"、"images"、"api-responses"）进行组织。

  • 控制权：HTTP 缓存由浏览器根据响应头（Cache-Control、Expires 等）自动管理；Cache API 由开发者通过 JavaScript 完全编程控制。
  • 粒度：HTTP 缓存以单个 URL 为单位；Cache API 以缓存组（cache name）为单位，可以批量管理相关资源。
  • 用途：HTTP 缓存主要用于加速页面加载；Cache API 主要用于离线支持和 PWA 场景。
  • 可见性：HTTP 缓存对 JavaScript 不可见；Cache API 可以通过代码完全遍历和操作。
  • 持久性：两者都是持久化存储，但 Cache API 的数据在存储压力下可能被浏览器清理。

您可以通过以下几种方式查看和管理缓存：
1. 浏览器开发者工具：打开 DevTools → Application（应用程序）→ Cache Storage，可以查看所有缓存及其内容。
2. 使用本工具：本页面通过 Cache API 直接读取和展示缓存数据，支持预览、搜索、删除等操作。
3. 编程方式：使用 caches.keys() 获取所有缓存名称，caches.open(name) 打开特定缓存，cache.keys() 遍历条目。
4. 清除浏览器数据：在浏览器设置中清除网站数据会同时删除所有相关缓存。

缓存数据存储在浏览器的本地存储空间中，与 IndexedDB、localStorage 等共享同一存储配额。具体位置因浏览器和操作系统而异，通常在用户数据目录中。

大小限制：没有固定的硬性限制，而是使用动态配额管理。浏览器会根据设备可用磁盘空间动态分配存储空间。一般来说：
  • 桌面浏览器通常允许每个源使用数百MB甚至更多。
  • 移动浏览器限制较严格，通常每个源几十到几百MB。
  • 可使用 navigator.storage.estimate() 查看当前使用量和配额。
  • 当磁盘空间不足时，浏览器可能会自动清理较旧的缓存数据。

Cache Storage：专门设计用于存储 HTTP 请求/响应对（Request/Response 对象）。适合缓存网络资源，如 HTML、CSS、JS、图片、API 响应等。API 简单，围绕请求匹配设计。

IndexedDB：通用的客户端数据库，支持结构化数据存储、索引、事务和复杂查询。适合存储应用数据、用户数据、JSON 对象等。

选择建议：
  • 需要缓存网络资源（URL → 响应）→ 使用 Cache Storage。
  • 需要存储结构化数据并支持查询 → 使用 IndexedDB。
  • 两者可以配合使用，例如用 IndexedDB 存储缓存元数据，用 Cache Storage 存储实际资源。

Cache API 不会自动判断过期或更新缓存。缓存内容会一直保留，直到被开发者显式删除或浏览器因存储压力清理。

开发者需要自行实现缓存策略：
  • Cache-First：优先使用缓存，缓存未命中时才请求网络。
  • Network-First：优先请求网络，失败时回退到缓存。
  • Stale-While-Revalidate：立即返回缓存，同时发起网络请求更新缓存。
  • 版本化管理：使用版本号作为缓存名（如 "v2"），更新时创建新缓存并删除旧版本。
  • 可以结合响应头中的 Date、Cache-Control 等信息自行判断新鲜度。

如果看不到缓存，可能有以下原因：
  • 网站未使用 Cache API：并非所有网站都使用 Service Worker 缓存。只有主动调用 caches.open() 并存入数据的网站才会有缓存。
  • 非安全上下文：Cache API 需要在 HTTPS 或 localhost 环境下才能使用。HTTP 页面上 caches 对象可能不可用。
  • 缓存已被清理：浏览器可能因存储压力自动清理了缓存，或用户手动清除了浏览器数据。
  • 隐私模式：在浏览器隐私/无痕模式下，缓存数据通常在会话结束后被清除。
  • 跨域限制：本工具只能访问当前域名下的缓存，无法查看其他网站的缓存。

  • 使用版本化缓存名：如 "my-app-v1"、"my-app-v2"，方便管理和迁移。
  • 及时清理旧缓存：在 Service Worker activate 事件中删除旧版本缓存。
  • 设置合理的缓存范围：避免缓存过多或过大的资源，注意存储配额。
  • 处理存储配额：监听存储配额变化，在空间不足时优雅降级。
  • 结合网络策略：不要完全依赖缓存，确保用户能获取到最新内容。
  • 缓存关键资源：优先缓存应用外壳（App Shell）和关键路径资源，确保离线可用。
  • 避免缓存敏感数据：不要在缓存中存储用户隐私数据或敏感信息。
  • 测试缓存行为：使用本工具和浏览器 DevTools 定期检查缓存状态。
🔧 相关工具