Background Fetch API

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Экспериментальная возможность: Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

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

Концепт и использование

Довольно часто, когда веб-приложение требует от пользователя скачивания больших файлов, это создаёт проблему, поскольку пользователю необходимо оставаться подключённым к странице до завершения скачивания. Если же соединение пропадает, например пользователь закрывает вкладку или уходит со страницы, то скачивание прерывается.

Background Synchronization API даёт сервис-воркерам возможность отложить обработку до тех пор, пока пользователь не подключится; однако такой подход не может быть использован для длительных задач, таких как скачивание больших файлов. Background Sync требует чтобы сервис-воркер оставался активным до завершения запроса, но для экономии заряда батареи и предотвращения возникновения нежелательных задач, выполняемых в фоновом режиме, браузер в какой-то момент завершит задачу.

Background Fetch API решает это проблему. Он позволяет веб-разработчику сообщать браузеру, что некоторые запросы нужно выполнять в фоновом режиме, например, когда пользователь нажимает на кнопку "скачать видеофайл". Затем браузер выполняет запрос "видимым" для пользователя способом, отображая прогресс и предоставляя способ отменить скачивание. После завершения загрузки браузер открывает сервис-воркер, и ваше приложение может, по необходимости, сделать что-то с ответом.

Background Fetch API позволит выполнить запрос, если пользователь начал процесс в автономном режиме. Как только соединение будет установлено, Background Fetch API начнёт скачивание. Если пользователь переходит в автономный режим, процесс приостанавливается до тех пор, пока пользователь не подключится к сети снова.

Интерфейсы

BackgroundFetchManager

Коллекция пар ключ-значение, где ключи это идентификаторы фоновых запросов, а значения - объекты BackgroundFetchRegistration.

BackgroundFetchRegistration

Представляет фоновый запрос.

BackgroundFetchRecord

Представляет отдельный запрос и ответ.

BackgroundFetchEvent

Тип события, который передаётся в onbackgroundfetchabort и onbackgroundfetchclick.

BackgroundFetchUpdateUIEvent

Тип события, который передаётся в onbackgroundfetchsuccess и onbackgroundfetchfail.

Примеры

Перед использованием Background Fetch проверьте совместимость с браузерами.

css
if (!("BackgroundFetchManager" in self)) {
  // Обеспечьте резервный способ загрузки
}

Использование Background Fetch требует зарегистрированного сервис-воркера. Затем вызов backgroundFetch.fetch() инициирует запрос. Этот вызов возвращает промис, результатом обработки которого будет BackgroundFetchRegistration.

Background Fetch может запрашивать несколько файлов. В нашем примере происходит запрос MP3 и JPEG файлов. Это позволяет скачать сразу пакет файлов, которые пользователь видит как один элемент (например, подкаст и обложку).

js
navigator.serviceWorker.ready.then(async (swReg) => {
  const bgFetch = await swReg.backgroundFetch.fetch(
    "my-fetch",
    ["/ep-5.mp3", "ep-5-artwork.jpg"],
    {
      title: "Эпизод 5: Интересные дела.",
      icons: [
        {
          sizes: "300x300",
          src: "/ep-5-icon.png",
          type: "image/png",
        },
      ],
      downloadTotal: 60 * 1024 * 1024,
    },
  );
});

Вы можете найти демонстрационное приложение, которое реализует Background Fetch здесь.

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 3 авг. 2023 г. by MDN contributors.

View this page on GitHub • Report a problem with this content

Background Fetch API
Интерфейсы
Свойства
1. ServiceWorkerRegistration.backgroundFetch
События

Background Fetch API

In this article

Концепт и использование

Интерфейсы

Примеры

Спецификации

Совместимость с браузерами

api.BackgroundFetchManager

api.BackgroundFetchRegistration

api.BackgroundFetchRecord

Смотрите также

Help improve MDN