内容索引

实验性： 这是一个 实验性技术
在生产环境中使用此功能之前，请仔细查看 浏览器兼容性表。

注意：此功能在 Web Workers 中可用。

内容索引 API 的 ContentIndex 接口允许开发者将其支持离线的网页内容注册到浏览器。

实例属性

此接口没有任何属性。

实例方法

ContentIndex.add()

将项目注册到 内容索引。

ContentIndex.delete()

从当前已编入索引的内容中注销项目。

ContentIndex.getAll()

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

示例

功能检测和接口访问

这里我们获取对 ServiceWorkerRegistration 的引用，然后检查 index 属性，它使我们能够访问内容索引接口。

js
// reference registration
const registration = await navigator.serviceWorker.ready;

// feature detection
if ("index" in registration) {
  // Content Index API functionality
  const contentIndex = registration.index;
}

添加到内容索引

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

js
// our content
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",
};

// our asynchronous function to add indexed content
async function registerContent(data) {
  const registration = await navigator.serviceWorker.ready;

  // feature detect Content Index
  if (!registration.index) {
    return;
  }

  // register content
  try {
    await registration.index.add(data);
  } catch (e) {
    console.log("Failed to register content: ", e.message);
  }
}

检索当前索引中的项目

以下示例显示了一个异步函数，该函数检索 内容索引 中的项目，并迭代每个条目，为界面构建一个列表。

js
async function createReadingList() {
  // access our service worker registration
  const registration = await navigator.serviceWorker.ready;

  // get our index entries
  const entries = await registration.index.getAll();

  // create a containing element
  const readingListElem = document.createElement("div");

  // test for entries
  if (entries.length === 0) {
    // if there are no entries, display a message
    const message = document.createElement("p");
    message.innerText =
      "You currently have no articles saved for offline reading.";

    readingListElem.append(message);
  } else {
    // if entries are present, display in a list of links to the content
    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);
  }
}

注销已编入索引的内容

下面是一个异步函数，它从 内容索引 中删除一个项目。

js
async function unregisterContent(article) {
  // reference registration
  const registration = await navigator.serviceWorker.ready;

  // feature detect Content Index
  if (!registration.index) return;

  // unregister content from index
  await registration.index.delete(article.id);
}

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

js
// service worker script

self.registration.index.add(item);

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

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

规范

规范
内容索引
# content-index

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅