Web/API/ContentIndex

From Get docs

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

Update compatibility data on GitHub

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet

ContentIndex

Experimental'

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

add

Experimental'

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

delete

Experimental'

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

getAll

Experimental'

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: