内容索引 API 查看器 - 管理离线可用内容列表

打开查看器页面后，您会看到添加内容的表单区域。在标题输入框中输入内容的标题，例如"JavaScript异步编程完全指南"。在描述文本域中填写内容的简短摘要，例如"从回调函数到Promise到async/await的完整演进历程"。在URL输入框中输入内容的访问地址，例如"/articles/async-javascript-guide"。在类别下拉菜单中选择"文章"（article）类别。图标URL字段为可选项，如果您有内容的缩略图地址可以填写，否则留空即可。确认所有信息无误后，点击"添加索引"按钮提交表单。提交成功后，您会看到新条目出现在已索引内容列表中，操作日志记录了本次添加操作的详细信息。第一次添加内容是理解整个工作流程的最佳起点。

在掌握单条内容添加的基础上，尝试批量添加不同类型的内容条目以体验类别统计功能。添加一篇技术文章（类别选择article）、一个视频教程（类别选择video）、和一个工具资源（类别选择other）。为每条内容填写不同的标题、描述和URL信息，观察添加过程中已索引列表和类别统计区域的实时变化。每添加一条内容，统计区域的文章、视频、其他计数会相应更新。建议至少添加5到10条不同类型的内容，这样可以更直观地观察类别分布的可视化效果。添加完成后，查看统计区域的进度条或饼图，确认各类别的数量和占比与您添加的内容一致。这种批量操作的练习有助于建立对Content Indexing API数据管理流程的完整认知。

在已索引内容列表中，尝试使用筛选和搜索功能管理内容。点击类别筛选按钮可以只显示特定类别的内容，例如只显示所有视频类别的条目。在搜索输入框中输入关键词，列表会实时过滤只显示标题或描述中包含该关键词的条目。这些筛选操作不会修改底层数据，只是在显示层面进行过滤。清除筛选条件后列表会恢复显示所有内容。通过筛选和搜索操作，可以在大量索引内容中快速定位到目标条目，这对于管理拥有数十甚至数百条索引内容的PWA非常有价值。查看每条内容的完整元数据信息，确认标题、描述、URL、类别、图标等字段的显示是否正确。尝试点击内容的URL链接，验证链接是否正确指向目标页面。

在已索引内容列表中，点击某条内容旁的"编辑"按钮，打开编辑表单。修改该条目的标题或描述信息，然后保存修改。确认修改后的内容立即在列表中更新显示。编辑功能允许开发者在不删除重建的情况下修正内容元数据，这在内容信息需要更新的场景中非常实用。接下来尝试删除功能：点击某条内容旁的"删除"按钮，系统会弹出确认对话框询问是否确认删除。点击确认后该条目从列表中移除，类别统计数据同步更新，操作日志记录删除操作。如果误删了内容，可以通过"添加索引"功能重新创建。尝试删除一个类别中的所有条目，观察该类别的计数归零后的统计展示效果。编辑和删除操作是内容索引管理中的常用操作，熟练掌握这些操作有助于在实际项目中维护索引内容的准确性和时效性。

在添加了若干条索引内容后，点击"生成代码"按钮查看自动生成的代码片段。生成的代码包含Content Indexing API的核心操作示例：在Service Worker中使用self.registration.index.add()方法添加索引内容；使用self.registration.index.getAll()方法查询所有已索引内容；使用self.registration.index.delete()方法删除指定索引内容。代码中还包含特性检测逻辑，判断浏览器是否支持Content Indexing API，在不支持的浏览器中提供降级方案。仔细阅读生成的代码，理解Content Indexing API的调用模式和参数结构。每个索引条目的代码都包含title、description、url、category和icons等必填和可选字段。将生成的代码复制到剪贴板，然后在本地项目的Service Worker文件中参考使用。生成的代码是一个良好的起点，实际项目中还需要根据具体的业务需求进行适当的修改和扩展。

// Content Indexing API使用示例
// 在Service Worker中注册索引内容
self.registration.index.add({
  title: 'JavaScript异步编程完全指南',
  description: '从回调函数到Promise到async/await',
  url: '/articles/async-javascript-guide',
  category: 'article',
  icons: [{ src: '/icons/article.png', sizes: '192x192' }]
});

// 查询所有已索引内容
const entries = await self.registration.index.getAll();
console.log('已索引内容数量:', entries.length);