BackgroundFetchUpdateUIEvent

Limited availability

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

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

Интерфейс BackgroundFetchUpdateUIEvent, из набора Background Fetch API это тип события для событий backgroundfetchsuccess и backgroundfetchfail, который предосталвяет метод для обновления заголовка и иконки приложения, для информирования юзера об успехе или провале фонового запроса.

Event ExtendableEvent BackgroundFetchEvent BackgroundFetchUpdateUIEvent

Конструктор

BackgroundFetchUpdateUIEvent()

Создаёт новый объект BackgroundFetchUIEvent. Этот конструктор обычно не используется, так как браузер сам создаёт эти объекты для событий backgroundfetchsuccess и backgroundfetchfail.

Свойства экземпляра

Этот интерфейс не реализует каких-либо особенных свойств, но наследует свойства Event, и BackgroundFetchEvent.

Методы экземпляра

BackgroundFetchUpdateUIEvent.updateUI()

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

Примеры

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

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

  event.waitUntil(
    (async () => {
      // Создать/открыть кэш.
      const cache = await caches.open("downloads");
      // Получить все записи.
      const records = await bgFetch.matchAll();
      // Копировать каждый запрос/ответ.
      const promises = records.map(async (record) => {
        const response = await record.responseReady;
        await cache.put(record.request, response);
      });

      // Ждать пока копирование завершиться
      await Promise.all(promises);

      // Обновить уведомление о прогрессе
      event.updateUI({ title: "Эпизод 5 готов к прослушиванию!" });
    })(),
  );
});

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

Specification
Background Fetch
# background-fetch-update-ui-event

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

BCD tables only load in the browser