API загрузки в фоновом режиме

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

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

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

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

API загрузки в фоновом режиме позволит выполнить загрузку, если пользователь начнёт процесс в автономном режиме. После подключения к сети загрузка начнется. Если пользователь отключится от сети, процесс приостановится до тех пор, пока пользователь не подключится снова.

BackgroundFetchManager Экспериментальная версия

Словарь, где ключами являются идентификаторы загрузки в фоновом режиме, а значениями — объекты BackgroundFetchRegistration.

BackgroundFetchRegistration Экспериментальная версия

Представляет загрузку в фоновом режиме.

BackgroundFetchRecord Экспериментальная версия

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

BackgroundFetchEvent Экспериментальная версия

Тип события для события backgroundfetchabort и backgroundfetchclick.

BackgroundFetchUpdateUIEvent Экспериментальная версия

Тип события для события backgroundfetchsuccess и backgroundfetchfail.

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

Возвращает ссылку на объект BackgroundFetchManager, который управляет операциями загрузки в фоновом режиме.

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

Срабатывает, когда операция загрузки в фоновом режиме была отменена пользователем или приложением.

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

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

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

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

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

Срабатывает, когда все запросы в операции загрузки в фоновом режиме завершились успешно.

Перед использованием загрузки в фоновом режиме проверьте поддержку браузера.

if (!("BackgroundFetchManager" in self)) {
  // Provide fallback downloading.
}

Для использования загрузки в фоновом режиме требуется зарегистрированный сервисный рабочий процесс. Затем вызовите backgroundFetch.fetch() для выполнения загрузки. Это возвращает обещание, которое выполняется с объектом BackgroundFetchRegistration.

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

navigator.serviceWorker.ready.then(async (swReg) => {
  const bgFetch = await swReg.backgroundFetch.fetch(
    "my-fetch",
    ["/ep-5.mp3", "ep-5-artwork.jpg"],
    {
      title: "Episode 5: Interesting things.",
      icons: [
        {
          sizes: "300x300",
          src: "/ep-5-icon.png",
          type: "image/png",
        },
      ],
      downloadTotal: 60 * 1024 * 1024,
    },
  );
});

Демо-приложение, реализующее загрузку в фоновом режиме, вы можете найти здесь.

• Introducing Background Fetch
• Background Fetch - HTTP 203