W3cubDocs

/Web APIs

ContentIndex: add() method

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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

Syntax

js

add(contentDescription)

Parameters

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.

Return value

Returns a Promise that resolves with undefined

Exceptions

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.

Examples

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.

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

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

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

self.registration.index.add(item);

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
add No No No No No No 84 84 No 60 No 14.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/ContentIndex/add