Расширяемый событие

Интерфейс ExtendableEvent расширяет срок действия событий install и activate, которые генерируются на глобальном уровне в рамках жизненного цикла сервисного рабочего процесса. Это гарантирует, что любые функциональные события (например, FetchEvent) не будут генерироваться до тех пор, пока не будут обновлены схемы базы данных и удалены устаревшие записи кеша.

Если waitUntil() вызывается вне обработчика ExtendableEvent, браузер должен сгенерировать InvalidStateError; также обратите внимание, что несколько вызовов будут накапливаться, и полученные обещания будут добавлены в список обещаний продления срока действия.

Этот интерфейс наследуется от интерфейса Event.

ExtendableEvent()

Создает новый объект ExtendableEvent.

Не реализует каких-либо специфических свойств, но наследует свойства от своего родителя, Event.

Наследует методы от своего родителя, Event.

ExtendableEvent.waitUntil()

Расширяет срок действия события. Предполагается, что он вызывается в обработчике события install для рабочего процесса installing и в обработчике события activate для рабочего процесса active.

Этот фрагмент кода взят из примера сервисного рабочего процесса предзагрузки (см. живой пример предзагрузки.) Код вызывает ExtendableEvent.waitUntil() в oninstall, откладывая обработку рабочего процесса ServiceWorkerRegistration.installing как установленного до успешного разрешения переданного обещания. Обещание разрешается, когда все ресурсы извлечены и помещены в кеш, или при возникновении любого исключения.

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

const CACHE_VERSION = 1;
const CURRENT_CACHES = {
  prefetch: `prefetch-cache-v${CACHE_VERSION}`,
};

self.addEventListener("install", (event) => {
  const urlsToPrefetch = [
    "./static/pre_fetched.txt",
    "./static/pre_fetched.html",
    "https://www.chromium.org/_/rsrc/1302286216006/config/customLogo.gif",
  ];

  console.log(
    "Handling install event. Resources to pre-fetch:",
    urlsToPrefetch,
  );

  event.waitUntil(
    caches
      .open(CURRENT_CACHES["prefetch"])
      .then((cache) => {
        return cache
          .addAll(
            urlsToPrefetch.map((urlToPrefetch) => {
              return new Request(urlToPrefetch, { mode: "no-cors" });
            }),
          )
          .then(() => {
            console.log("All resources have been fetched and cached.");
          });
      })
      .catch((error) => {
        console.error("Pre-fetching failed:", error);
      }),
  );
});

• Использование сервисных рабочих процессов
• Базовый пример кода сервисных рабочих процессов
• Использование веб-рабочих процессов