ServiceWorker.onstatechange

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

statechange 타입의 이벤트가 발생될 때마다 호출되는 EventListener 속성. 기본적으로 ServiceWorker.state가 변경되는 시점에 발생한다.

Syntax

ServiceWorker.onstatechange = function(statechangeevent) { ... }
ServiceWorker.addEventListener('statechange', function(statechangeevent) { ... } )

Examples

이 코드 조각은 service worker registration-events sample (live demo) 으로부터 가져온 것이다. 이 코드는 ServiceWorker.state의 모든 변경 사항을 수신하고 그 값을 반환한다.

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

statechange 가 발생할 때, 서비스워커의 참조들이 변화할 수 있으므로 주의하라. 예시:

navigator.serviceWorker.register(..).then(function(swr) {
  swr.installing.state == "installing"
  swr.installing.onstatechange = function() {
    swr.installing == null;
    // 이 시점에서, swr.waiting 또는 swr.active는 true일 것이다. 이것은 statechange 이벤트가 대기 상태이기 때문이며,
    // 그동안 잠재 상태의 워커가 waiting 상태가 될 수도 있으며 가능한 경우에는 즉시 activated 될 것이다.
  }
})

Specifications

Specification Status Comment
Service Workers
The definition of 'ServiceWorker.onstatechange' in that specification.
Working Draft Initial definition

Browser compatibility

BCD tables only load in the browser