ContentIndex | Web API

在此页

特性
方法
范例
规范
浏览器兼容性
另请参阅：
相关话题

草案
此页面不完整。

ContentIndex 接口在 Content Index API allows developers to register their offline enabled content with the browser.

特性

此接口没有特性。

方法

ContentIndex.add: 注册项采用 content index .
ContentIndex.delete
ContentIndex.getAll: 返回 Promise that resolves with an iterable list of content index entries.

范例

特征检测和接口访问

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;
}

添加到内容索引

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

取消注册索引内容

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 特性：

// service worker script
self.registration.index.add(item);
self.registration.index.delete(item.id);
const contentIndexItems = self.registration.index.getAll();

规范

规范	状态	注释
未知 The definition of 'ContentIndex' in that specification.	未知	初始定义。

浏览器兼容性

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.

No compatibility data found. Please contribute data for "api.ContentIndex" (depth: 1) to the MDN 兼容性数据存储库 .

另请参阅：

元数据

最后修改： 2020 年 8 月 24 日