ServiceWorker

Интерфейс ServiceWorker, являющийся частью ServiceWorker API, позволяет взаимодействовать с Service Worker. К одному Service Worker могут быть привязаны несколько контекстов (например страниц, Web Workers, и т.д.), каждый с использованием собственного объекта ServiceWorker.

Объект ServiceWorker можно получить через свойства ServiceWorkerRegistration.active и ServiceWorkerContainer.controller — это Service Worker, который активировал и контролирует текущую страницу (в случае, если Service Worker был успешно зарегистрирован и страница была обновлена)

Интерфейс ServiceWorker обрабатывает события жизненного цикла: install и activate и функциональные события, например fetch. Объект ServiceWorker также содержит опцию ServiceWorker.state, отражающую его состояние.

Свойства

Интерфейс ServiceWorker наследует свойства Worker.

ServiceWorker.scriptURL Только для чтения

URL кода для данного Service Worker. URL должен находиться в том же домене, что и документ, регистрирующий ServiceWorker.

ServiceWorker.state Только для чтения

Состояние данного Service Worker. Может иметь следующие значения: installing, installed, activating, activated или redundant.

Обработчики событий

ServiceWorker.onstatechange Только для чтения

Срабатывает при срабатывании события statechange; По сути, срабатывает при каждом изменении ServiceWorker.state.

Методы

Интерфейс ServiceWorker наследует все методы интерфейса Worker, кроме Worker.terminate, который не должен быть доступен для Service Worker.

Примеры

Этот фрагмент кода из примера событий Service Worker (демо). Данный код возвращает значение ServiceWorker.state при каждом изменении состояния.

js
if ("serviceWorker" in navigator) {
  navigator.serviceWorker
    .register("service-worker.js", {
      scope: "./",
    })
    .then(function (registration) {
      var serviceWorker;
      if (registration.installing) {
        serviceWorker = registration.installing;
        document.querySelector("#kind").textContent = "installing";
      } else if (registration.waiting) {
        serviceWorker = registration.waiting;
        document.querySelector("#kind").textContent = "waiting";
      } else if (registration.active) {
        serviceWorker = registration.active;
        document.querySelector("#kind").textContent = "active";
      }
      if (serviceWorker) {
        // logState(serviceWorker.state);
        serviceWorker.addEventListener("statechange", function (e) {
          // logState(e.target.state);
        });
      }
    })
    .catch(function (error) {
      // Произошла ошибка при регистрации Service Worker.
      // Файл service-worker.js может быть недоступным или содержать ошибки синтаксиса.
    });
} else {
  // Данный браузер не поддерживает Service Worker.
}

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

Specification
Service Workers
# serviceworker-interface

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

BCD tables only load in the browser

Смотрите Также