InstallEvent

Параметр, передаваемый в обработчик события install, интерфейс InstallEvent представляет действие установки, которое отправляется на ServiceWorkerGlobalScope объекта ServiceWorker. Как дочерний элемент ExtendableEvent, он гарантирует, что функциональные события, такие как FetchEvent, не отправляются во время установки.

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

InstallEvent() Экспериментальный

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

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

Наследует методы от родительского класса, ExtendableEvent.

addRoutes() Экспериментальный

Определяет один или несколько статических маршрутов, которые определяют правила получения указанных ресурсов, которые будут использоваться даже до запуска service worker.

Этот фрагмент кода взят из примера кэширования prefetch service worker (см. рабочий пример prefetch). Код вызывает ExtendableEvent.waitUntil() в ServiceWorkerGlobalScope.oninstall и откладывает обработку ServiceWorkerRegistration.installing worker как установленного, пока соответствующая promise не разрешится успешно. Promise разрешается, когда все ресурсы получены и кэшированы, или когда возникает любое исключение.

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

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

• install событие
• NotificationEvent
• Promise
• Fetch API