ContentIndex - 允许开发人员在浏览器中注册其已启用离线功能的内容

ContentIndex 是内容索引 API 的接口，允许开发人员在浏览器中注册其已启用离线功能的内容。

属性

此接口没有属性。

方法

ContentIndex.add()

向内容索引注册一个项目。

ContentIndex.delete()

从当前索引的内容中取消注册项目。

ContentIndex.getAll()

返回一个 Promise，解析为一个可迭代的列表，包含了内容索引条目。

实例

功能检测和接口访问

在这里，我们获得对 ServiceWorkerRegistration 的引用，然后检查 index 属性，该属性使我们可以访问内容索引接口。

// 获取注册引用
const registration = await navigator.serviceWorker.ready;

// 功能检测
if ('index' in registration) {
  // 内容索引 API 功能
  const contentIndex = registration.index;
}

添加到内容索引

在这里，我们以正确的格式声明一个项目，并创建一个异步函数，该异步函数使用 add() 方法将其注册到内容索引中。

// 我们的内容
const item = {
  id: 'post-1',
  url: '/posts/amet.html',
  title: 'Amet consectetur adipisicing',
  description: 'Repellat et quia iste possimus ducimus aliquid a aut eaque nostrum.',
  icons: [{
    src: '/media/dark.png',
    sizes: '128x128',
    type: 'image/png',
  }],
  category: 'article'
};

// 我们的异步函数来添加索引内容
async function registerContent(data) {
  const registration = await navigator.serviceWorker.ready;

  // 检测内容索引是否可用
	if (!registration.index) {
		return;
	}

  // 注册内容
  try {
		await registration.index.add(data);
  } catch (e) {
    console.log('无法注册内容：', e.message);
  }
}

检索当前索引中的项目

以下实例显示了一个异步函数，该函数检索内容索引中的项目，并遍历每个条目，为接口建立一个列表。

async function createReadingList() {
  // 访问我们的服务工作线程
  const registration = await navigator.serviceWorker.ready;

  // 获取我们的索引条目
  const entries = await registration.index.getAll();

  // 创建一个父元素
  const readingListElem = document.createElement('div');

  if (!entries.length) {

    // 如果没有条目，则显示一条消息
    const message = document.createElement('p');
    message.innerText = '您目前没有保存任何文章以供离线阅读。'

    readingListElem.append(message);

  } else {

    // 如果存在条目，则在内容链接的列表中显示
    const listElem = document.createElement('ul');

    for (const entry of entries) {
      const listItem = document.createElement('li');

      const anchorElem = document.createElement('a');
      anchorElem.innerText = entry.title;
      anchorElem.setAttribute('href', entry.url);

      listElem.append(listItem);

    }

    readingListElem.append(listElem);
  }

}

注销索引内容

以下是一个异步函数，该函数从内容索引中删除一项。

async function unregisterContent(article) {

  // 获取注册引用
  const registration = await navigator.serviceWorker.ready;

  // 检测内容索引是否可用
  if (!registration.index)
    return;

  // 从索引中注销内容
  await registration.index.delete(article.id);
}

以上所有方法均在 服务工作线程范围内可用。可通过 WorkerGlobalScope.self 属性访问它们：

// 服务工作线程脚本

self.registration.index.add(item);

self.registration.index.delete(item.id);

const contentIndexItems = self.registration.index.getAll();

规范

规范	状态	备注
Unknown ContentIndex 的定义	Unknown	初始定义。

桌面浏览器兼容性

移动浏览器兼容性

相关链接

• 关于内容索引 API 的介绍性文章
• 一个使用 Content Index API 列出和删除 “以后保存” 内容的应用
• Service Worker API，以及有关 Cache 和 CacheStorage 的信息