ServiceWorkerGlobalScope: событие backgroundfetchsuccess

Событие backgroundfetchsuccess интерфейса ServiceWorkerGlobalScope срабатывает при успешном завершении операции background fetch, то есть при успешном завершении всех сетевых запросов в рамках этой операции.

Это событие не отменяется и не распространяется.

Используйте имя события в методах, таких как addEventListener(), или задайте обработчик события.

addEventListener("backgroundfetchsuccess", (event) => {});

onbackgroundfetchsuccess = (event) => {};

Объект BackgroundFetchUpdateUIEvent.

Наследует свойства от родительского класса BackgroundFetchEvent.

BackgroundFetchUpdateUIEvent.updateUI()

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

При успешном завершении операции background fetch (когда все отдельные сетевые запросы завершены успешно), браузер запускает сервис-воркер (при необходимости) и вызывает событие backgroundfetchsuccess в глобальной области видимости сервис-воркера.

В обработчике этого события сервис-воркер может получить и сохранить ответы (например, используя API Cache). Для доступа к данным ответа сервис-воркер использует свойство registration события.

В API background fetch браузер отображает пользователю элемент пользовательского интерфейса для отображения хода выполнения операции. В обработчике backgroundfetchsuccess сервис-воркер может обновить этот пользовательский интерфейс, чтобы показать, что операция завершена успешно. Для этого обработчик вызывает метод updateUI() события, передавая новый заголовок и/или значки.

Этот обработчик события сохраняет все ответы в кэше и обновляет пользовательский интерфейс.

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

  event.waitUntil(async () => {
    // Open a cache
    const cache = await caches.open("movies");
    // Get all the records
    const records = await registration.matchAll();
    // Cache all responses
    const cachePromises = records.map(async (record) => {
      const response = await record.responseReady;
      await cache.put(record.request, response);
    });

    // Wait for caching to finish
    await Promise.all(cachePromises);

    // Update the browser's UI
    event.updateUI({ title: "Move download complete" });
  });
});

• API background fetch