概念與用法
目前，使用者難以發現離線 Web 內容。內容索引允許開發者告知瀏覽器其特定的離線內容。這使得使用者能夠發現和檢視可用內容，同時讓開發者能夠新增和管理這些內容。例如，新聞網站可以在後臺預載入最新文章，或者內容流應用可以註冊已下載的內容。
Content Index API 是 Service Worker 的一個擴充套件，它允許開發者在當前 Service Worker 的作用域內新增已快取頁面的 URL 和元資料。瀏覽器隨後可以使用這些條目向用戶顯示離線閱讀內容。作為開發者，你也可以在你的應用程式中顯示這些條目。
索引條目不會自動過期。最好提供一個清除條目的介面，或者定期刪除舊條目。
注意： API 支援索引對應於 HTML 文件的 URL。例如，快取媒體檔案的 URL 不能直接索引。相反，你需要提供一個顯示媒體且支援離線的頁面的 URL。
介面
ContentIndex實驗性-
提供註冊離線可用內容的功能。
ContentIndexEvent實驗性-
定義用於表示
contentdelete事件的物件。
其他介面的擴充套件
Content Index API 規範中指定了對 ServiceWorker 的以下新增，以提供使用內容索引的入口點。
ServiceWorkerRegistration.index只讀 實驗性-
返回一個指向
ContentIndex介面的引用，用於索引已快取的頁面。 contentdelete事件 實驗性-
當內容被使用者代理移除時觸發。
示例
以下所有示例都假定已註冊 Service Worker。有關更多資訊，請參閱 Service Worker API。
功能檢測和介面訪問
在這裡，我們獲取對 ServiceWorkerRegistration 的引用，然後檢查 `index` 屬性，該屬性提供了對內容索引介面的訪問。
// reference registration
const registration = await navigator.serviceWorker.ready;
// feature detection
if ("index" in registration) {
// Content Index API functionality
const contentIndex = registration.index;
}
新增到內容索引
在這裡，我們以正確的格式聲明瞭一個條目，並建立了一個非同步函式，該函式使用 add() 方法將其註冊到內容索引。
// 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);
}
}
檢索當前索引中的條目
下面的示例展示了一個非同步函式，該函式檢索內容索引中的條目，並遍歷每個條目，為介面構建一個列表。
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);
}
}
取消註冊已索引的內容
下面是一個非同步函式，它從內容索引中移除一個條目。
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` 屬性訪問。
// service worker script
self.registration.index.add(item);
self.registration.index.delete(item.id);
const contentIndexItems = self.registration.index.getAll();
contentdelete 事件
當用戶代理介面中的某個條目被移除時，Service Worker 會收到一個 `contentdelete` 事件。
self.addEventListener("contentdelete", (event) => {
console.log(event.id);
// logs content index id, which can then be used to determine what content to delete from your cache
});
contentdelete 事件僅在刪除是由於與瀏覽器內建使用者介面的互動而發生時觸發。當呼叫 ContentIndex.delete() 方法時，不會觸發此事件。
規範
| 規範 |
|---|
| Content Index |
瀏覽器相容性
api.ContentIndex
載入中…
api.ServiceWorkerRegistration.index
載入中…