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
--------------

| Specification |
| --- |
| Content Index # content-index-add |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* 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