The ContentIndex
interface of the Content Index API allows developers to register their offline enabled content with the browser.
There are no properties of this interface.
Here we get a reference to the ServiceWorkerRegistration
, then check for the index
property, which gives us access to the content index interface.
const registration = await navigator.serviceWorker.ready;
if ("index" in registration) {
const contentIndex = registration.index;
}
Here we're declaring an item in the correct format and creating an asynchronous function which uses the add()
method to register it with the content index.
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("Failed to register content: ", e.message);
}
}
The below example shows an asynchronous function that retrieves items within the content index and iterates over each entry, building a list for the interface.
async function createReadingList() {
const registration = await navigator.serviceWorker.ready;
const entries = await registration.index.getAll();
const readingListElem = document.createElement("div");
if (!Array.length) {
const message = document.createElement("p");
message.innerText =
"You currently have no articles saved for offline reading.";
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);
}
}
Below is an asynchronous function, that removes an item from the content index.
async function unregisterContent(article) {
const registration = await navigator.serviceWorker.ready;
if (!registration.index) return;
await registration.index.delete(article.id);
}
All the above methods are available within the scope of the service worker. They are accessible from the WorkerGlobalScope.self
property:
self.registration.index.add(item);
self.registration.index.delete(item.id);
const contentIndexItems = self.registration.index.getAll();