The add() method of the ContentIndex interface registers an item with the content index.

contentDescription

An Object containing the following data:

id

A unique String identifier.

title

A String title for the item. Used in user-visible lists of content.

description

A String description of the item. Used in user-visible lists of content.

url

A String containing the URL of the corresponding HTML document. Needs to be under the scope of the current service worker.

category Optional

A String defining the category of content. Can be:

• '' An empty String, this is the default.
• homepage
• article
• video
• audio

icons Optional

An Array of image resources, defined as an Object with the following data:

src

A URL String of the source image.

sizes Optional

A String representation of the image size.

type Optional

The MIME type of the image.

Returns a Promise that resolves with undefined

TypeError

This exception is thrown in the following conditions:

• The service worker's registration is not present or the service worker does not contain a FetchEvent.
• The id, title, description or url are missing, not of type String, or an empty String.
• One of the items in icons are not an image type, or fetching one of the items in icons failed with a network error.

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.

// 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);
  }
}

The add method can also be used within the service worker scope.

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

self.registration.index.add(item);

• An introductory article on the Content Index API
• An app which uses the Content Index API to list and remove 'save for later' content
• Service Worker API, along with information about Cache and CacheStorage