Background Fetch API

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

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 здесь.

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

Specification
Background Fetch

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

api.BackgroundFetchManager

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
BackgroundFetchManager
Experimental
fetch
Experimental
get
Experimental
getIds
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.

api.BackgroundFetchRegistration

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
BackgroundFetchRegistration
Experimental
abort
Experimental
downloadTotal
Experimental
downloaded
Experimental
failureReason
Experimental
id
Experimental
match
Experimental
matchAll
Experimental
progress event
Experimental
recordsAvailable
Experimental
result
Experimental
uploadTotal
Experimental
uploaded
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.

api.BackgroundFetchRecord

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
BackgroundFetchRecord
Experimental
request
Experimental
responseReady
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.

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