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

内容索引API演示 - 离线可用内容列表

11
0
0
0
内容索引API · 运行状态
HTTPS
检测中...
Service Worker
检测中...
Content Index API
检测中...
网络状态
检测中...
检测中 已索引内容：-- 项
添加内容到索引
留空将自动生成时间戳ID
0/300
可选，建议提供方形图标
已索引内容列表 0

暂无索引内容

使用左侧表单添加内容，或点击"填充示例"快速体验

常见问题与知识点

Content Indexing API 是一个Web API，允许网站将可离线访问的内容（如文章、视频、音频）注册到浏览器的内容索引中。当用户离线时，浏览器可以在其界面中展示这些已索引的内容，让用户知道哪些内容可以离线浏览。它是PWA（渐进式Web应用）生态的重要组成部分。

主要用途包括：① 让用户知道在离线状态下可以访问哪些内容；② 提升PWA的用户体验，增强离线浏览的可见性；③ 帮助浏览器在下载管理或新标签页中展示可离线内容；④ 与Service Worker和Cache API配合，实现完整的离线内容策略；⑤ 提升用户对PWA离线能力的信任感。

目前主要支持Chromium内核的浏览器：Google Chrome（桌面版和Android版）、Microsoft Edge、Opera、Samsung Internet等。Firefox和Safari目前尚未原生支持该API。建议在使用前进行特性检测：if ('index' in ServiceWorkerRegistration.prototype)。

基本步骤：① 注册Service Worker并等待其激活；② 通过navigator.serviceWorker.ready获取registration对象；③ 调用registration.index.add({id, url, title, description, icons, category})；④ 在Service Worker中监听contentdelete事件处理删除。注意：需要HTTPS环境。

是的，Content Indexing API 强依赖Service Worker。它通过ServiceWorkerRegistration.index属性暴露接口。没有注册并激活的Service Worker，该API无法使用。此外，Service Worker还需要处理contentdelete事件，以便在用户通过浏览器界面删除索引内容时做出响应。

Cache API负责实际存储离线资源（HTML、CSS、JS、图片等），是"存储层"；Content Indexing API负责"声明"哪些内容可离线访问，是"索引层"。两者互补：Cache API确保内容离线可用，Content Indexing API让浏览器和用户知道这些内容的存在。简单说，Cache API做存储，Content Indexing API做展示。

推荐的特征检测方法：
const supportsCI = 'serviceWorker' in navigator && 'index' in ServiceWorkerRegistration.prototype;
如果为true，说明浏览器支持该API。但实际使用还需要HTTPS和已激活的Service Worker。本工具会自动检测并在状态面板中显示结果。

① 仅为真正可离线访问的内容创建索引；② 使用有意义的ID便于管理；③ 提供高质量的图标（至少192×192）；④ 及时更新索引，删除已失效的内容；⑤ 在Service Worker的contentdelete事件中清理对应的缓存；⑥ 避免索引过多内容（建议控制在50项以内）；⑦ 确保URL可正常访问且与缓存版本一致。

Content Indexing API定义了以下类别：'homepage'（主页）、'article'（文章/阅读内容）、'video'（视频内容）、'audio'（音频/播客），以及空字符串''表示未分类。浏览器可能会根据类别以不同方式展示内容（如视频类可能显示播放图标）。

本工具优先检测并使用真实的Content Indexing API。如果检测到浏览器支持且Service Worker已激活，将使用真实API操作。在不满足条件时，自动切换到localStorage模拟模式，提供完整的功能体验。状态面板会清晰显示当前的运行模式。所有数据在模拟模式下存储在浏览器的localStorage中。
🔧 相关工具