ContentIndex.add()

Draft
This page is not complete.

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

Syntax

ContentIndex.add(ContentDescription).then(...);

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.
  • title: A String title of 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
If the service worker's registration is not present or the service worker does not contain a FetchEvent.
If the id, title, description or url are missing, not of type String, or an empty String.
If icons images are not of image type.

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.

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

Specifications

Specification Status Comment
Content Index API
The definition of 'add' in that specification.
Editor's Draft Initial definition.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
add
Experimental
Chrome No support NoEdge Full support 84Firefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android Full support 84Chrome Android Full support 84Firefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.

See also: