Представляем фоновую выборку

Jake Archibald

В 2015 году мы представили фоновую синхронизацию , которая позволяет сервисному работнику откладывать работу до тех пор, пока у пользователя не будет подключения. Это означает, что пользователь может ввести сообщение, нажать «Отправить» и покинуть сайт, зная, что сообщение будет отправлено либо сейчас, либо когда у него будет подключение.

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

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

Фоновая выборка доступна по умолчанию, начиная с Chrome 74.

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

Попробуйте демо-версию самостоятельно и просмотрите код .

Как это работает

Фоновая выборка работает следующим образом:

1. Вы указываете браузеру выполнить группу выборок в фоновом режиме.
2. Браузер извлекает эти данные, отображая прогресс пользователю.
3. После завершения или сбоя выборки браузер открывает вашего сервис-воркера и запускает событие, сообщающее вам, что произошло. Здесь вы решаете, что делать с ответами, если что.

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

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

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

API

Обнаружение функции

Как и в случае с любой новой функцией, вы хотите определить, поддерживает ли ее браузер. Для фоновой выборки это так же просто:

if ('BackgroundFetchManager' in self) {
  // This browser supports Background Fetch!
}

Запускаем фоновую выборку

Основной API зависает от регистрации сервис-воркера , поэтому сначала убедитесь, что вы зарегистрировали сервис-воркера. Затем:

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

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

backgroundFetch.fetch принимает три аргумента:

Параметры
id	string однозначно идентифицирует эту фоновую выборку. backgroundFetch.fetch отклонит, если идентификатор соответствует существующей фоновой выборке.
requests	Array< Request |string> Вещи, которые нужно принести. Строки будут обрабатываться как URL-адреса и превращаться в Request с помощью new Request(theString) . Вы можете получать данные из других источников, если ресурсы позволяют это через CORS . Примечание. Chrome в настоящее время не поддерживает запросы, требующие предварительной проверки CORS.
options	Объект, который может включать в себя следующее:
options.title	string Заголовок, который браузер будет отображать вместе с прогрессом.
options.icons	Array< IconDefinition > Массив объектов с `src`, `size` и `type`.
options.downloadTotal	number Общий размер тел ответа (после распаковки). Хотя это не является обязательным, настоятельно рекомендуется предоставить его. Он используется, чтобы сообщить пользователю, насколько велика загрузка, и предоставить информацию о ходе загрузки. Если вы не укажете это, браузер сообщит пользователю, что размер неизвестен, и в результате пользователь с большей вероятностью прервет загрузку. Если фоновая загрузка превысит указанное здесь число, она будет прервана. Совершенно нормально, если загрузка меньше, чем downloadTotal , поэтому, если вы не уверены, какова будет общая сумма загрузок, лучше проявить осторожность.

backgroundFetch.fetch возвращает обещание, которое разрешается с помощью BackgroundFetchRegistration . Подробности я расскажу позже. Обещание отклоняется, если пользователь отказался от загрузок или один из предоставленных параметров недействителен.

Предоставление множества запросов для одной фоновой выборки позволяет объединить вещи, которые для пользователя логически являются единым целым. Например, фильм может быть разделен на тысячи ресурсов (типично для MPEG-DASH ) и содержать дополнительные ресурсы, такие как изображения. Уровень игры может быть распределен по множеству ресурсов JavaScript, изображений и аудио. Но для пользователя это просто «фильм» или «уровень».

Внимание: Внимание: реализация Chrome в настоящее время принимает запросы только без тела. В будущем будет разрешено использование тел, а это означает, что вы сможете использовать фоновую выборку для больших загрузок, таких как фотографии и видео.

Получение существующей фоновой выборки

Вы можете получить существующую фоновую выборку следующим образом:

navigator.serviceWorker.ready.then(async (swReg) => {
  const bgFetch = await swReg.backgroundFetch.get('my-fetch');
});

…передавая идентификатор нужной фоновой выборки. get возвращает undefined если нет активной фоновой выборки с этим идентификатором.

Фоновая выборка считается «активной» с момента ее регистрации до тех пор, пока она не завершится успешно, не завершится неудачей или не будет прервана.

Вы можете получить список всех активных фоновых выборок, используя getIds :

navigator.serviceWorker.ready.then(async (swReg) => {
  const ids = await swReg.backgroundFetch.getIds();
});

Регистрация фоновой выборки

BackgroundFetchRegistration ( bgFetch в приведенных выше примерах) имеет следующее:

Характеристики
id	string Идентификатор фоновой выборки.
uploadTotal	number Количество байтов, которые будут отправлены на сервер.
uploaded	number Количество успешно отправленных байт.
downloadTotal	number Значение, предоставленное при регистрации фоновой выборки, или нулевое.
downloaded	number Количество успешно полученных байтов. Это значение может уменьшиться. Например, если соединение разрывается и загрузку невозможно возобновить, в этом случае браузер перезапускает выборку этого ресурса с нуля.
result	Одно из следующих: "" — фоновая выборка активна, поэтому результата пока нет. "success" — фоновая выборка прошла успешно. "failure" — фоновая выборка не удалась. Это значение появляется только в случае полного сбоя фоновой выборки, поскольку браузер не может повторить попытку или возобновить ее.
failureReason	Одно из следующих: "" — фоновая выборка не удалась. "aborted" — фоновая выборка была прервана пользователем или была вызвана abort() . "bad-status" — один из ответов имел неудовлетворительный статус, например 404. "fetch-error" — одна из выборок не удалась по какой-либо другой причине, например, CORS, MIX, недопустимый частичный ответ или общий сбой сети для выборки, которую невозможно повторить. "quota-exceeded" — во время фоновой выборки была достигнута квота хранилища. "download-total-exceeded" — превышено указанное значение «downloadTotal».
recordsAvailable	boolean Можно ли получить доступ к основным запросам/ответам? Если это ложное match , то matchAll использовать нельзя.
Методы
abort()	Возвращает Promise<boolean> Прервать фоновую выборку. Возвращенное обещание разрешается с true, если выборка была успешно прервана.
matchAll(request, opts)	Возвращает Promise<Array<BackgroundFetchRecord>> Получите запросы и ответы. Аргументы здесь такие же, как и у API кэша . Вызов без аргументов возвращает обещание для всех записей. Более подробную информацию смотрите ниже.
match(request, opts)	Возвращает Promise<BackgroundFetchRecord> То же, что и выше, но разрешается при первом совпадении.
События
progress	Вызывается при изменении любого из uploaded , downloaded , result или failureReason .

Отслеживание прогресса

Это можно сделать с помощью события progress . Помните, что downloadTotal — это любое указанное вами значение или 0 , если вы не указали значение.

bgFetch.addEventListener('progress', () => {
  // If we didn't provide a total, we can't provide a %.
  if (!bgFetch.downloadTotal) return;

  const percent = Math.round(bgFetch.downloaded / bgFetch.downloadTotal * 100);
  console.log(`Download progress: ${percent}%`);
});

Получение запросов и ответов

Внимание: в текущей реализации Chrome вы можете получать запросы и ответы только во время событий backgroundfetchsuccess , backgroundfetchfailure и backgroundfetchabort (см. ниже). В будущем вы сможете получать данные о текущей выборке.

bgFetch.match('/ep-5.mp3').then(async (record) => {
  if (!record) {
    console.log('No record found');
    return;
  }

  console.log(`Here's the request`, record.request);
  const response = await record.responseReady;
  console.log(`And here's the response`, response);
});

record представляет собой BackgroundFetchRecord и выглядит следующим образом:

Характеристики
request	Request Запрос, который был предоставлен.
responseReady	Promise<Response> Надуманный ответ. За обещанием стоит ответ, поскольку он, возможно, еще не получен. Промис будет отклонен, если выборка не удастся.

События для сервисных работников

События
backgroundfetchsuccess	Все было успешно получено.
backgroundfetchfailure	Не удалось выполнить одну или несколько операций выборки.
backgroundfetchabort	Не удалось выполнить одну или несколько выборок. Это действительно полезно, только если вы хотите выполнить очистку связанных данных.
backgroundfetchclick	Пользователь нажал на пользовательский интерфейс процесса загрузки.

Объекты событий имеют следующее:

Характеристики
registration	BackgroundFetchRegistration
Методы
updateUI({ title, icons })	Позволяет изменить заголовок/значки, которые вы изначально установили. Это необязательно, но при необходимости позволяет предоставить больше контекста. Вы можете сделать это только один раз во время событий backgroundfetchsuccess и backgroundfetchfailure .

Реакция на успех/неуспех

Мы уже видели событие progress , но оно полезно только тогда, когда у пользователя открыта страница вашего сайта. Основное преимущество фоновой выборки заключается в том, что все продолжает работать после того, как пользователь покидает страницу или даже закрывает браузер.

Если фоновая выборка успешно завершится, ваш сервис-воркер получит событие backgroundfetchsuccess , а event.registration будет регистрацией фоновой выборки.

После этого события полученные запросы и ответы больше не доступны, поэтому, если вы хотите сохранить их, переместите их куда-нибудь, например в API кэша .

Как и в случае с большинством событий сервис-воркера, используйте event.waitUntil , чтобы сервис-воркер знал, когда событие завершится.

Примечание. Примечание. Здесь нельзя держать сервис-воркера открытым на неопределенный срок, поэтому избегайте действий, из-за которых сервис-воркер будет оставаться открытым здесь в течение длительного времени, например дополнительной выборки.

Например, в вашем сервисном работнике:

addEventListener('backgroundfetchsuccess', (event) => {
  const bgFetch = event.registration;

  event.waitUntil(async function() {
    // Create/open a cache.
    const cache = await caches.open('downloads');
    // Get all the records.
    const records = await bgFetch.matchAll();
    // Copy each request/response across.
    const promises = records.map(async (record) => {
      const response = await record.responseReady;
      await cache.put(record.request, response);
    });

    // Wait for the copying to complete.
    await Promise.all(promises);

    // Update the progress notification.
    event.updateUI({ title: 'Episode 5 ready to listen!' });
  }());
});

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

Реакция на клик

Пользовательский интерфейс, отображающий ход загрузки и результат, является кликабельным. Событие backgroundfetchclick в сервисном работнике позволяет вам отреагировать на это. Как указано выше, event.registration будет регистрацией фоновой выборки.

Обычно с этим событием нужно открыть окно:

addEventListener('backgroundfetchclick', (event) => {
  const bgFetch = event.registration;

  if (bgFetch.result === 'success') {
    clients.openWindow('/latest-podcasts');
  } else {
    clients.openWindow('/download-progress');
  }
});

Дополнительные ресурсы

• Объяснитель
• Спецификация
• запись на chromestatus.com

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