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
: AString
title for the item. Used in user-visible lists of content.title
: AString
title of the item. Used in user-visible lists of content.description
: AString
description of the item. Used in user-visible lists of content.url
: AString
containing the url of the corresponding HTML document. Needs to be under the scope of the currentservice worker
.category
: Optional AString
defining the category of content. Can be:
- A unique
An empty
String
, this is the default.homepage
article
video
audio
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
orurl
are missing, not of typeString
, or an emptyString
. - 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 APIThe definition of 'add' in that specification. | Editor's Draft | Initial definition. |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Chrome
No support No |
Edge
Full support 84 |
Firefox
No support No |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
Full support 84 |
Chrome Android
Full support 84 |
Firefox Android
No support No |
Opera Android
No support No |
Safari iOS
No support No |
Samsung 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:
- 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
ContentIndex.add() by Mozilla Contributors is licensed under CC-BY-SA 2.5.