ServiceWorker

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2018.

* Some parts of this feature may have varying levels of support.

Интерфейс 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

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
ServiceWorker
Support for ECMAScript modules
error event
postMessage
scriptURL
state
statechange event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

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