ContentIndex
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental:This is anexperimental technology
Check theBrowser compatibility table carefully before using this in production.
Note: This feature is available inWeb Workers.
TheContentIndex interface of theContent Index API allows developers to register their offline enabled content with the browser.
Instance properties
There are no properties of this interface.
Instance methods
ContentIndex.add()ExperimentalRegisters an item with thecontent index.
ContentIndex.delete()ExperimentalUnregisters an item from the currently indexed content.
ContentIndex.getAll()ExperimentalReturns a
Promisethat resolves with an iterable list of content index entries.
Examples
Feature detection and interface access
Here we get a reference to theServiceWorkerRegistration, then check for theindex property, which gives us access to the content index interface.
// reference registrationconst registration = await navigator.serviceWorker.ready;// feature detectionif ("index" in registration) { // Content Index API functionality const contentIndex = registration.index;}Adding to the content index
Here we're declaring an item in the correct format and creating an asynchronous function which uses theadd() method to register it with thecontent index.
// our contentconst 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 contentasync 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); }}Retrieving items within the current index
The below example shows an asynchronous function that retrieves items within thecontent index and iterates over each entry, building a list for the interface.
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); }}Unregistering indexed content
Below is an asynchronous function, that removes an item from thecontent index.
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);}All the above methods are available within the scope of theservice worker. They are accessible from theWorkerGlobalScope.self property:
// service worker scriptself.registration.index.add(item);self.registration.index.delete(item.id);const contentIndexItems = self.registration.index.getAll();Specifications
| Specification |
|---|
| Content Index # content-index |