ContentIndex: add() method
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
Note: This feature is available in Web Workers.
The add()
method of the
ContentIndex
interface registers an item with the content index.
Syntax
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 emptyString
, this is the default.homepage
article
video
audio
icons
Optional-
An
Array
of image resources, defined as anObject
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.
label
Optional-
A string representing the accessible name of the icon.
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
. - One of
id
,title
,description
orurl
parameter are missing, not of typeString
, or an emptyString
. - The
url
parameter is not same-origin policy with the service worker. - One of the items in
icons
are not an image type, or fetching one of the items inicons
failed with a network error or decode error.
- The service worker's registration is not present or the service worker does not contain a
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 |
---|
Content Index # content-index-add |
Browser compatibility
BCD tables only load in the browser