Content Indexing API 允许网站告知浏览器哪些内容支持离线访问。通过该 API，网站可以将已缓存的页面、文章、视频等添加到浏览器的内容索引中。浏览器可以在自己的 UI（如 Chrome Android 的「下载」页面或新标签页）中展示这些内容，让用户更方便地发现和管理可离线浏览的资源。

该 API 是 PWA 离线体验的重要补充，让离线内容不再「隐藏」在缓存中，而是对用户可见。

目前（2024年），Content Indexing API 是 Chromium 特有的 API：

• ✅ Chrome Android（84+）：完全支持
• ⚠️ Chrome 桌面版：支持 API 调用，但浏览器 UI 不展示索引
• ✅ Edge Android：基于 Chromium，支持
• ❌ Firefox：不支持（无计划）
• ❌ Safari / iOS：不支持

建议始终进行特性检测：'serviceWorker' in navigator && 'index' in ServiceWorkerRegistration.prototype

Cache API 负责实际存储资源（HTML、CSS、JS、图片等），让它们在离线时可用。

Content Indexing API 负责「声明」哪些 URL 的内容已准备好离线使用。它本身不缓存任何内容——你仍然需要使用 Cache API 或 Service Worker 来缓存实际资源。

简单来说：Cache API = 实际存储，Content Indexing API = 内容目录/清单。两者配合使用才能提供完整的离线体验。

1. HTTPS：网站必须通过 HTTPS 提供服务（localhost 除外）。
2. 已注册的 Service Worker：需要通过 navigator.serviceWorker.ready 获取 registration 对象。
3. SW 作用域匹配：索引的 URL 必须在 Service Worker 的作用域内，否则会抛出 TypeError。
4. 实际缓存：内容必须已通过 Cache API 或其他方式缓存，确保离线可访问。
5. contentdelete 事件监听：SW 应监听 contentdelete 事件，以便在用户通过浏览器 UI 删除索引时清理对应缓存。

图标用于在浏览器 UI 中代表索引内容。建议：

• 提供至少一个图标，96x96 或 192x192 像素
• src 使用绝对 URL 或相对于站点根目录的路径
• sizes 格式如 "96x96" 或 "96x96 192x192"
• type 应明确指定，如 "image/png"、"image/svg+xml"
• 可使用 data URI，但推荐使用真实 URL 以获得更好性能

当用户在浏览器 UI 中删除索引内容时，会触发 Service Worker 的 contentdelete 事件。你应该在 SW 中监听该事件来清理对应的缓存：

注意：通过 JavaScript 调用 registration.index.delete(id) 不会触发此事件，开发者需自行处理缓存清理。

• 浏览器对索引数量有隐式限制（通常几十个），过多条目可能不会被全部展示。
• 使用有意义的 ID（如文章 slug），便于管理和删除。
• 确保索引的 URL 确实已缓存并可离线访问，避免用户点击后加载失败。
• 在内容更新或缓存失效时，同步更新索引（先 delete 再 add）。
• 不要索引用户隐私内容或临时页面。
• 在 navigator.onLine 为 false 时，用户更可能浏览索引内容。

调试技巧：

• 打开 Chrome DevTools → Application → Service Workers，查看 SW 状态
• 在 DevTools 的 Console 中运行：navigator.serviceWorker.ready.then(r => r.index.getAll()).then(console.log)
• 使用 chrome://serviceworker-internals/ 查看详细的 SW 信息
• 在 Android Chrome 的 下载 页面可看到已索引的内容（如果支持）
• 确保 SW 已激活且作用域正确

实际应用场景包括：

• 新闻/博客网站：让用户保存文章离线阅读
• 视频平台：索引已下载的视频内容
• 学习平台：让课程内容在离线时被发现
• 文档站点：技术文档离线索引
• 电商 PWA：产品目录离线浏览

核心价值：弥合「已缓存」与「用户可发现」之间的差距，提升离线内容的使用率。