Draft This page is not complete.
The ContentIndex
interface of the Content Index API
allows developers to register their offline enabled content with the browser.
Properties
There are no properties of this interface.
Methods
ContentIndex.add()
- Registers an item with the
content index
. ContentIndex.delete()
- Unregisters an item from the currently indexed content.
ContentIndex.getAll()
- Returns a
Promise
that resolves with an iterable list of content index entries.
Examples
Feature Detection and Interface Access
Here we get a reference to the ServiceWorkerRegistration
, then check for the index
property, which gives us access to the content index interface.
// reference registration
const registration = await navigator.serviceWorker.ready;
// feature detection
if ('index' in registration) {
// Content Index API functionality
const contentIndex = registration.index;
}
Adding to the Content Index
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);
}
}
Retrieving Items Within The Current Index
The below example shows an asynchronous function that retrieves items within the content index
and iterates over each entry, building a list for the interface.
async function createReadingList() {
// access our service worker registration
const registration = await navigator.serviceWorker.ready;
// get our index entries
const entries = await registration.index.getAll();
// create a containing element
const readingListElem = document.createElement('div');
// test for entries
if (!Array.length) {
// if there are no entries, display a message
const message = document.createElement('p');
message.innerText = 'You currently have no articles saved for offline reading.'
readingListElem.append(message);
} else {
// if entries are present, display in a list of links to the content
const listElem = document.createElement('ul');
for (const entry of entries) {
const listItem = document.createElement('li');
const anchorElem = document.createElement('a');
anchorElem.innerText = entry.title;
anchorElem.setAttribute('href', entry.url);
listElem.append(listItem);
}
readingListElem.append(listElem);
}
}
Unregistering Indexed Content
Below is an asynchronous function, that removes an item from the content index
.
async function unregisterContent(article) {
// reference registration
const registration = await navigator.serviceWorker.ready;
// feature detect Content Index
if (!registration.index)
return;
// unregister content from index
await registration.index.delete(article.id);
}
All the above methods are available within the scope of the service worker
. They are accessible from the WorkerGlobalScope.self
property:
// service worker script
self.registration.index.add(item);
self.registration.index.delete(item.id);
const contentIndexItems = self.registration.index.getAll();
Specifications
Specification | Status | Comment |
Content Index APIThe definition of 'ContentIndex' 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 |
|
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 |
|
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 |
|
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 by Mozilla Contributors is licensed under CC-BY-SA 2.5.