ContentIndex
注意：此功能在 Web Workers 中可用。
ContentIndex 接口是 Content Index API 的一部分，它允许开发者向浏览器注册支持离线使用的内容。
实例属性
此接口没有属性。
实例方法
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);
}
以上所有方法都在 service worker 的作用域内可用。它们可以通过 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 # content-index |
浏览器兼容性
加载中…