Индекс контента API

API индекса контента позволяет разработчикам регистрировать свой контент, работающий в автономном режиме, в браузере.

В настоящее время автономный веб-контент не легко обнаруживается пользователями. Индексирование контента позволяет разработчикам сообщать браузеру о своем конкретном автономном контенте. Это позволяет пользователям обнаруживать и просматривать доступный контент, а также дает разработчикам возможность добавлять и управлять этим контентом. Примеры: новостной сайт, предварительно извлекающий последние статьи в фоновом режиме, или приложение для потоковой передачи контента, регистрирующее загруженный контент.

API индекса контента является расширением сервисных рабочих потоков, которое позволяет разработчикам добавлять URL-адреса и метаданные уже кэшированных страниц в рамках текущего сервисного рабочего потока. Затем браузер может использовать эти записи для отображения автономного чтения пользователю. Разработчик также может отображать эти записи в своем приложении.

Индексированные записи не истекают автоматически. Рекомендуется предоставить интерфейс для очистки записей или периодически удалять устаревшие записи.

ContentIndex Экспериментально

Обеспечивает функциональность для регистрации контента, доступного в автономном режиме.

ContentIndexEvent Экспериментально

Определяет объект, используемый для представления события contentdelete.

В спецификации API индекса контента указаны следующие дополнения к ServiceWorker для предоставления точки входа для использования индексирования контента.

ServiceWorkerRegistration.index Только для чтения Экспериментально

Возвращает ссылку на интерфейс ContentIndex для индексирования кэшированных страниц.

contentdelete событие Экспериментально

Срабатывает при удалении контента пользователем.

Во всех последующих примерах предполагается, что сервисный рабочий поток зарегистрирован. Для получения дополнительной информации см. API сервисных рабочих потоков.

Здесь мы получаем ссылку на ServiceWorkerRegistration, а затем проверяем свойство index, которое дает нам доступ к интерфейсу индекса контента.

// reference registration
const registration = await navigator.serviceWorker.ready;

// feature detection
if ("index" in registration) {
  // Content Index API functionality
  const contentIndex = registration.index;
}

Здесь мы объявляем элемент в правильном формате и создаем асинхронную функцию, которая использует метод add() для регистрации его в индексе контента.

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

В приведенном ниже примере показана асинхронная функция, которая извлекает элементы из индекса контента и итерирует по каждой записи, создавая список для интерфейса.

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 (entries.length === 0) {
    // 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);
  }
}

Ниже приведена асинхронная функция, которая удаляет элемент из индекса контента.

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

Все вышеперечисленные методы доступны в рамках области действия сервисного рабочего потока. Они доступны из свойства WorkerGlobalScope.self:

// service worker script

self.registration.index.add(item);

self.registration.index.delete(item.id);

const contentIndexItems = self.registration.index.getAll();

Когда элемент удаляется из пользовательского интерфейса, сервисный рабочий поток получает событие contentdelete.

self.addEventListener("contentdelete", (event) => {
  console.log(event.id);

  // logs content index id, which can then be used to determine what content to delete from your cache
});

Событие contentdelete срабатывает только тогда, когда удаление происходит из-за взаимодействия с встроенным пользовательским интерфейсом браузера. Оно не срабатывает при вызове метода ContentIndex.delete().

• Вводная статья об API индекса контента
• API сервисных рабочих потоков, а также информация о кэше и CacheStorage