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.
Интерфейс 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
при каждом изменении состояния.
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